TIL

Today I Learned. 知ったこと、学んだことを書いていく

親要素の横幅いっぱいに表示 - 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%;にしなくてもいいのかな?というかなんでした方がいいと思ったのだろうか...

参考文献