0

私は次の方法でボックスにパディングを追加しようとしています：

.p-box-header{
  border: 1px solid orange;
  float: left;
  width: $p-box-width;
  padding: 0px 0px 0xp 20px;
}

そしてそれはこのように見えます： ここに画像の説明を入力してください

'Food'ヘッダーは、その幅に20pxを追加しています。これは下のボックスでは発生しませんでした。なぜこれが起こっているのですか、どうすれば防ぐことができますか？

どうも

4

1 に答える 1

2

注：「0px」ではなく「0xp」と書きました。これで問題が解決しない場合は、以下をお読みください。

box-sizingと呼ばれる CSS3 プロパティを見てください。

これにより、ブラウザーは指定された幅と高さでボックスをレンダリングし、ボックス内に境界線とパディングを配置するようになります。

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

詳細はこちら：http://css-tricks.com/box-sizing/ IE8以降で利用可能です（CanIUse - Box-sizing）

于 2013-01-19T05:51:17.173 に答える