CSS3を勉強したい

CSS3

width指定が原因で横幅がはみ出す

下の見本では、子要素の横幅を、親要素に対してwidth: 100%;を指定しています。それに加えpadding: 7px;border: solid 4px #f88;も指定しています。

HTMLコード

<div class="oya_youso">
    <p>親要素</p>
        <div class="ko_youso">
            <p>子要素</p>
        </div>
</div>

CSSコード

.oya_youso {
    background-color: #ddf;
    height: 150px;
}
.ko_youso {
    background-color: #fcc;
    width: 100%;
    padding: 7px;
    border: solid 4px #f88;
}

上記コードの結果が下です。

親要素

子要素

子要素に指定しているwidth: 100%;は、親要素に対しての横幅を「100%」にする、という意味です。なのに、子要素が親要素からはみ出すのはどうしてでしょうか。

親要素から子要素がはみ出す原因

そもそもボックスのサイズは、「コンテンツ領域+padding+border+margin」の合計で算出されます。そして、widthプロパティ(heightも同様)は、デフォルトではコンテンツ領域の大きさの指定に使うプロパティです。

よってこの場合、「100%」指定したコンテンツ領域に加え、padding、borderの領域がプラスされていることになります。子要素のコンテンツ領域の幅は、親要素に対して「100%」で収まっているが、padding、borderの分がはみ出した状態です。

子要素の横幅をwidth: 96%;といった形で「100%」より小さい値で指定すると、一応は親要素に収まります。ただこれだと、親要素に対してぴったりのサイズとは限りません。ではどうすか。

親要素に対して、余白の設定をした子要素をぴったり収めるにはbox-sizingプロパティを使います。

box-sizing プロパティを使う

本来width、heightは、コンテンツ領域に対してのみ影響するプロパティですが、同時にbox-sizingプロパティを指定することでwidth、heightが影響する領域を変えることができます。

つまり、コンテンツ領域に対してのみだったのが、パディング領域とボーダー領域も含めた指定へと変更することができるのです。

下の見本では、横幅は変わらずwidth: 100%;とし、同時にbox-sizing: border-box;も指定しています。そうすることで、子要素に余白を設定しても親要素にぴったり収まります。

HTMLコード

<div class="oya_youso">
    <p>親要素</p>
        <div class="ko_youso">
            <p>子要素</p>
        </div>
</div>

CSSコード

.oya_youso {
    background-color: #ddf;
    height: 150px;
}
.ko_youso {
    background-color: #fcc;
    width: 100%;
    padding: 7px;
    border: solid 4px #f88;
    box-sizing: border-box;
}

上記コードの結果が下です。

親要素

子要素

子要素に対して指定しているwidth: 100%;は、同時にbox-sizing: border-box;を指定することで、paddingとborderを含めた幅」として扱われます

よって余白があっても、親要素に対してぴったりの幅になります。