css - 全幅を変更せずにパディングを追加

Question

事前定義された幅の上に追加せずに要素にパディングを追加するにはどうすればよいですか？

レイアウトのきれいなグリッドを作成するために、列の幅を定義することをお勧めします。ただし、列内のコンテンツにパディングを追加する必要もあります。それを指定する方法はありますか？

Answer 1

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

Answer 2

box-sizing を使用すると、パディングが含まれます: https://developer.mozilla.org/en-US/docs/CSS/box-sizing

例：

div {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

これは IE7 では機能しないことに注意してください。

IE8 については、この Q: box-sizing: border-box => for IE8?に対する一番上の回答を参照してください。

Answer 3

ブロック要素にパディングを追加するたびに、この要素の幅が変わります。この問題には多くの解決策があります。私は通常margin、最初の子要素に設定width: 100%し、この要素に設定します。

たとえば、次のようなものがあります。

<div id="main">
    <div id="child">
        This is content with margin
    </div>
</div>

これらの要素の CSS スタイル:

#main {
    border: solid 1px red;
    float: left;
    width: 5em;
}

#child {
    border: solid 1px blue;
    float: left;
    width: 100%;
    margin: 0.5em;
}

これは、任意のブラウザーのソリューションです。