ホームページ > 記事 > ウェブフロントエンド > CSS width: 100% と width: auto_html/css_WEB-ITnose の違い
width: 100% と width: auto の違い
width: auto の方が賢明です。マージンが左右のスペースの 10 ピクセルを占めている場合、width で指定される値は 580 ピクセルです。
<style>div{width:600px;overflow:auto;background:#ccc;}p{ width:auto; margin:10px; background:red;}</style></head><body><div> <p>123</p></div></body></html>
width: 100% の場合、p の幅が 600px になって div 領域を埋めることになり、マージンができるのでスクロールバーが表示されます。
div{width:600px;overflow:auto;background:#ccc;}p{ width:100%; margin:10px; background:red;}</style></head><body><div> <p>123</p></div>
はすべて親要素の幅に基づきます。