[CSS] 幅とパディングの関係【box-sizing】

2023.04.24

HTML要素の幅を固定して、パディングを内側に取りたいときには、「box-sizing」プロパティでborder-boxに指定します。

1. 固定ヘッダーとサイドバーが重なって幅が取れない

ウェブページに固定ヘッダーを作ろうと思いました。
位置を position: fixで固定します。

ところが、画面サイズによって幅の変わる左サイドバーがあったので、幅がうまくいきません。

サイドバーの幅の分だけ右にずらす（leftやpadding-left）と、ヘッダーバー全体が画面から右にはみ出てしまいました。

leftならともかく、padding-leftでもうまくいきません。
というのも、ヘッダーバーを画面に固定しているため、幅 width: 100% の基準が画面幅になるからです。
パディングは外に付け足されるので、その分だけ外にはみ出てしまうのです。

目次に戻る

2. box-sizingプロパティ

そこで探しみると、パディングを幅の内側にするプロパティ「box-sizing」が見つかりました¹。

「box-sizing: border-box」を選択すると、要素の幅はwidthで固定され、パディングは内側に取られます。

box-sizing: content-box; /* デフォルト値 */
box-sizing: border-box;

<style>
    .searchbox-space {
        height: 64px;
    }
    .searchbox-wrap {
		position: fixed; /* ヘッダーを固定する */
        top: 32px; /* 上部から配置の基準位置を決める */
        left: 0px;
		padding: 10px;
		background-color: #f0f0f1;
		opacity: 1;
		z-index: 999;
		padding-left: 172px;
		border-bottom: 1px solid #aaa;
		width: 100%;
		height: 64px;
		box-sizing: border-box;
        
    }
	.gcse-searchbox-only {
		display: block;
		background-color: #f0f0f1;
	}
    @media screen and (max-width: 960px){
        .searchbox-wrap {
        padding-left: 48px;
        position: absolute;
        }
    }
    @media screen and (max-width: 782px){
        .searchbox-wrap {
            top: 48px; /* 上部から配置の基準位置を決める */
    		padding-left: 0px;
    		height: 100px;
        }
        .searchbox-space {
            height: 100px;
        }
    }

</style>

こちらもどうぞ。