css边框完全改变div大小？

Question

编辑：发现了一个非常好的链接，解释了有关边界崩溃的所有内容：

border collapse explained with examples

编辑结束。享受：）

我没理解这个...... 为什么在我的div上应用1px纯黑色边框会改变div的大小？ （没有边框我可以看到一条相对细线作为我的背景颜色，边框背景颜色的øectangle更宽，看图片） 这张照片没有应用边框： 现在看这张照片（唯一的区别是边界......）

有人可以解释边界如何影响div大小/这里真正发生的事情吗？！

式：

#header {
background-color: yellow;
color: white;
text-align: center;
border: 1px solid black;
}

这是一个小提琴，所以你可以玩：     my fiddle 非常感谢， 麦。

Answer 1

那是因为margin collapsing。

边距不是元素iself的一部分，它是元素与周围元素之间的距离，或元素与包含边框或填充之间的距离。

在第一张图片中，标题元素的边距（可能是h1？）正在div之外折叠。边距不会影响div的大小，而是将周围的元素推开。

当你为div添加一个边框时，header元素的边距会将边框推离header元素而不是推开周围的元素。 header元素的边距决定了div的大小。

Answer 2

标题大小相同，只是背景不会填充指定为元素边距的区域。您的h1在顶部和底部有默认边距，浏览器无法计算该边距。为了强制它，你可以在Header上使用overflow: hidden;，这是一个覆盖99％的着名clearfix类（用于浮动修复）的旧技巧：

＆＃13;

＆＃13;

#header {
    background: yellow;
    overflow: hidden;
}
#sidebar {
    float: left;
    width: 30%;
    background: green;
}
#content {
    float: left;
    width: 70%;
    background: lime;
}

＆＃13;

<div id="header">
    <h1>Header</h1>
</div>
<div id="sidebar">
    <h1>Sidebar</h1>
</div>
<div id="content">
    <h1>Content</h1>
</div>

＆＃13;

＆＃13;

＆＃13;

另一种方法是避免h1边距并改为使用填充或固定高度：

＆＃13;

＆＃13;

#header {
    background: yellow;
}
#sidebar {
    float: left;
    width: 30%;
    background: green;
}
#content {
    float: left;
    width: 70%;
    background: lime;
}
h1 {
    margin: 0;
    padding: .8em 0;
}

＆＃13;

<div id="header">
    <h1>Header</h1>
</div>
<div id="sidebar">
    <h1>Sidebar</h1>
</div>
<div id="content">
    <h1>Content</h1>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以添加框大小以防止这种情况发生。并非每个浏览器都支持它。

html {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

Answer 4

div {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 1px solid yellow;
}

Answer 5

元素的总大小将由以下内容定义：

  

保证金＆gt;边框＆gt;填充＆gt;实际元素大小

您的浏览器的开发者控制台应该允许您查看所有这些的值，因此请尝试查看这两个实例之间的更改。从提供的图片看，当您手动调整边框时，填充可能会发生变化。

尝试手动设置这些值：

#header{
    border: 1px;
    border-color: black;
    margin: 0;
    padding: 0;
}

Answer 6

完美的例子为什么有时使用outline代替border可以解决很多问题。

  

大纲在以下方面与边界不同：

     

大纲不占用空间，它们被绘制在内容之上。

非常重视所有其他解决方案（这对于理解非常重要），请尝试使用以下方法作为一个简单的解决方案：

outline: 1px solid black;

而不是

border: 1px solid black;

JSFiddle

干杯！

Answer 7

将h1标签上的边距设置为0：

h1 {
    margin:0;
}

我更新了你的小提琴here