添加填充，而不改变整体宽度(Add padding without changing overall

如何可以添加填充到一个元件而不增加所述预定义宽度的顶部？

这是很好的定义列做一个干净的网格布局的宽度; 同时也希望填充添加到列里面的内容。 任何方式来指定？

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:

使用盒大小，它使填充包括： 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，请参见上面的回答这个问题： 箱尺寸：边界盒=>为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;
}

这是任何浏览器的解决方案

Answer 4:

这是一个古老的线程，我知道了。 但我最后一次有关使DIV与未设置宽度和垫衬有一个完整的黑洞，所以它不会炸毁我3列排与CSS2。 所以我把一个DIV与浮动左，上右，并在它们之间没有浮动，并没有固定宽度的DIV的，但我想有填充它。 那个怎么样...

我红粉了。 ：d但是我把内DIV在中心中的一个，并给它的宽度= 90％。 到目前为止好，非常简单，没有很好的解决方案，但有时它有助于实现您所需要的样子。 ]

BR

文章来源: Add padding without changing overall width