css - div のパディングを内側に向ける方法

Question

だから私はdivボックスにパディングを追加しようとしていますが、それはボックス自体を大きくし、デザインを捨てるだけです。それを止める方法についてのアイデアは、CSSコードです

#mainbox {
background-color:#111111;
padding:0px;
margin:0 auto;
width:900px;
border:solid 1px;
}

Answer 1

CSS3box-sizing: border-boxプロパティはおそらくまさにあなたが望むものです:

#mainbox {
    background-color:#111111;
    padding:10px;
    margin:0 auto;
    width:90px;
    border:solid 1px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

デフォルトではwidth、コンテンツにのみ適用され、事後に追加されます。したがって、がで、 のパディングを追加すると、 になります。marginpaddingwidth90px10pxdiv100px

box-sizingCSS3のプロパティにより、ブラウザにborder、margin、およびpaddingwithが含まれるwidthようになり、特にすべての幅が事前にわからない場合に、計算が少し簡単になります。

注:padding-boxプロパティは広くサポートされていません。

Answer 2

私が添付したサンプルを確認してください。ホバーで使いました。直接使用することもできます。

div {
    width:100px;
    height:100px;
    background-color:#ccc;
    margin:50px;
}

div:hover {
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

<div></div>