🐡

[CSS] width:100% と width:auto の違い

1 min read 2

はじめに

質問されたときにパッと答えられなかったので記事にまとめました!

width: 100%とは?

※ box-sizing: border-boxでないという前提で話を進めます!

widthにpaddingとborderは含まれない

widthの幅指定にpaddingとborderが含まれないため、HTMLの子要素にwidth:100%を指定したうえで、paddingとborderを指定してしまうと、親要素から子要素がはみ出て画面に表示される

サンプルコード

<div class='parent'>
 <div class='children'>children</div>
</div>
.parent {
  width: 400px;
  height: 200px;
  background-color: red;
}

.children {
  width: 100%;
  height: 150px;
  border: 10px solid blue;
  background-color: yellow;
}

デザイン

width.png

width: autoとは?

widthの中にpaddingとborderが含まれる

widthの幅指定にpaddingとborderが含まれるため、HTMLの子要素にwidth:autoを指定したうえで、paddingもしくはborderを指定しても、親要素から子要素がはみ出ないで画面に表示される

サンプルコード

<div class='parent'>
 <div class='children'>children</div>
</div>
.parent {
  width: 400px;
  height: 200px;
  background-color: red;
}

.children {
  width: auto;
  height: 150px;
  border: 10px solid blue;
  background-color: yellow;
}

デザイン

width2.png
親要素から子要素がはみ出ないで表示されていますね

結論

width: 100%を指定するとwidthにpaddingとborderは含まれない
width: autoを指定するとwidthにpaddingとborderは含まれる

Discussion

box-sizing: border-boxを指定していれば、width: 100%としていてもborderとpaddingのぶんがはみ出ることはないと思われます!

参考: box-sizing:border-boxの使い方

そうですね!誤解を招きそうなので記事に追記しておきました!

ログインするとコメントできます