CSSプロパティbox-sizingを使おう【CSS】

2022年9月2日

Contents

box-sizingとは

box-sizingは、HTML要素にpaddingとborderを含めるかどうかを指定するのに利用されるプロパティです。

paddingやborderプロパティを使用して余白や境界線の太さを設定すると、widthやheightのボックスにpaddingとborderのサイズが加わります。

そこで、box-sizingプロパティを使用することによって、ボックスの大きさにpaddingやborderを含める設定をすることができるようになり、余白や境界線の太さに影響されずにボックスの大きさを決めることが可能となります。

box-sizingの使い方

記述方法

box-sizingは以下のように記述します。

box-sizing:値;

値の種類

//paddingとborderはwidthとheightに含まれない

box-sizing: content-box;

//paddingとborderはwidthとheightに含まれる

box-sizing: border-box;

//親要素の指定を引き継ぐ

box-sizing: inherit;

使用例

HTML

<!DOCTYPE html>
<html>
<body>
<p class="box1">content-box</p>
<p class="box2">border-box</p>
</body>
</html>

CSS

.box1 {
width: 65%; 
height: 300px; 
border: 30px solid #000; 
padding: 20px;
box-sizing: content-box;
}

.box2 {
width: 65%; 
height: 300px; 
border: 30px solid #000; 
padding: 20px;
box-sizing: border-box;
}

出力結果

content-box

border-box