問題 × 解決策

box-sizingで、borderやpaddingをはみ出させないようにする。

問題

borderやpaddingをwidth、heightに含ませたい。

解決策

「box-sizing」を使用する。

 

border、paddingを内包する。

デザインの関係上、borderやpaddingをwidth、heightに含ませないと難しいレイアウトの場合の対策として、「box-sizing」をご紹介します。

まず、HTMLの構築を行います。

便宜上、クラス「boxsizing-box」を用意します。

<div class="boxsizing-box">
<p>border、paddingが内包されます。</p>
</div>

次にCSSの構築を行います。

クラス「boxsizing-box」に「box-sizing: border-box;」を設定します。

「box-sizing」の設定一覧

content-box borderとpaddingを幅(width)と高さ(height)の中に含めない(※初期値)
border-box borderとpaddingを幅(width)と高さ(height)の中に含める
inherit 親要素の値を継承する
.boxsizing-box{
	width: 100%;
	padding: 20px;
	border: 10px solid #F15A24;
	background-color: #FCECE8;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

DEMOはこちら

border、paddingが内包されます。

参考ページ

【box-sizing-CSS3リファレンス】
http://www.htmq.com/css3/box-sizing.shtml

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

20 − fourteen =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧