問題
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
コメント