borderやpaddingを指定するとはみ出す時の対処法 #CSS

要素のwidthは要素内のコンテンツまでを指定する。
コンテンツの外のpadding、border、marginはwidthには含まれないため、
width=100%に全て収めようとして次のようにコーディングするとはみ出すことになる。

.sample-box {
    width: 100%;
    border: 4px solid #000;
    padding: 4px;
}

簡単な解決法の一つとして、box-sizingをborder-boxに指定する。
そうするとborderまでをwidthに含めることができる。

.sample-box {
    width: 100%;
    border: 4px solid #000;
    padding: 4px;
    box-sizing: border-box;
}