在不改变总宽度的情况下添加填充

如何在不添加预定义宽度的前提下将填充添加到元素？在不改变总宽度的情况下添加填充

这是很好的定义列的宽度，使布局清晰的网格;但也想添加填充到列内的内容。任何方式来指定？

2013-03-13 user2119834

我认为利润率增加了预定义的宽度和填充顶部没有... – Jace 2013-03-13 10:47:18

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+ */ 
}

来源

2013-03-13 10:47:48

使用盒大小，它使填充包括： 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?

来源

2013-03-13 10:48:02 InsomniaBass

w3schools是一个可怕的资源。使用MDN。 – 2013-03-13 10:55:39

@JanDvorak好吧，道歉，但我没有意识到。用MDN编辑。很遗憾，看到一个答案纯粹取决于链接的选择，而不是内容本身。 – InsomniaBass 2013-03-13 10:58:47

对于浏览和阅读的人来说，我查找了w3schools的信息，并发现：http://w3fools.com - 强烈推荐阅读它，因为它解释了Jan Dvorak的说法。 – InsomniaBass 2013-03-13 11:06:48

每次你添加填充到块级元素，这个元素的变化宽度。这个问题有很多解决方案。我通常将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; 
}

这是任何浏览器

来源

2013-03-13 11:19:24 AlexN

这确实是W3C团队在设计布局模型时所考虑的解决方案。事实上，我从来没有使用过箱子的尺寸。 – 2013-03-13 11:31:04

+1，用于使用基本CSS的直接解决方案。 – lintmouse 2014-11-03 23:01:08

这是一个古老的线程，我知道解决办法。但上次我有一个完整的黑洞来制作一个没有设置宽度和填充的DIV，所以它不会炸毁我的3列行和CSS2。所以我把一个DIV放在左边，右边放着一个没有浮动和没有固定宽度的DIV，但我想填充它。那怎么样...

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

b.r.

来源

2015-02-23 00:11:58 siudek

在不改变总宽度的情况下添加填充

回答

相关问题