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，请参阅此问答的最佳答案：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;
}

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

Answer 4

我知道，这是一个老话题。但是上次我有一个关于制作一个没有设置宽度和填充的DIV的完整黑洞，所以它不会炸掉我的3列行和CSS2。所以我把一个带有浮动的DIV放在右侧，在它们之间放置一个没有浮动且没有固定宽度的DIV，但我想在其中填充。怎么样......

我放弃了。：D但是我把一个内部DIV放在中间，给它宽度= 90％。到目前为止这么好，一个非常简单而不是很好的解决方案，但有时它有助于实现您所需的外观。 ]

b.r。

添加填充而不更改总宽度

4 个答案: