親要素の横幅いっぱいに表示 - CSS
親要素の横幅いっぱいに表示しようと思ったときに、つまづいたのでメモ
box-sizing: border-box;
を使う
paddingをborderもwidthに含めるmargin
ではなく、padding
で調整する
marginはwidthに含まれていないため
<div class="main"> <textarea class="editer"></textarea> </div>
* { /* すごい重要!! */ box-sizing: border-box; } .editer { width: 100%; background-color: red; } .main { /* paddingで調整 */ padding: 10px; }
See the Pen 親要素の横幅いっぱいに表示 by tamago (@tamago324) on CodePen.
横幅いっぱいに表示できた!!!
親要素(.main、bodyタグ、htmlタグ)をwidth: 100%;
にしなくてもいいのかな?というかなんでした方がいいと思ったのだろうか...