css 边框完全改变了 div 的大小？ [复制]

Question

编辑：找到一个很好的链接来解释所有关于边框崩溃的内容：

border collapse explained with examples

编辑结束。享受:)

我无法理解这一点... 为什么对我的 div 应用 1px 纯黑色边框会大大改变 div 的大小？ （没有边框我可以看到一条相对细的线作为我的背景颜色，有边框背景颜色的ר矩形要宽得多，见图） 这张照片没有应用边框： 现在看看这张照片（唯一的区别是边框......）

有人可以解释边框如何对 div 大小产生如此大的影响/这里到底发生了什么？！

风格：

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

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

Answer 1

那是因为margin collapsing。

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

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

当您向 div 添加边框时，页眉元素的边距会将边框推离页眉元素，而不是推开周围的元素。 header 元素的边距决定了 div 的大小。

Answer 2

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

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

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

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

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

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

Answer 3

您可以添加 box-sizing 来防止这种情况发生。但并非所有浏览器都支持它。

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

Answer 4

元素的总大小将由以下方式定义：

Margin>Border>Padding>实际元素大小

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

尝试手动设置这些值：

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

Answer 5

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

h1 {
    margin:0;
}

我更新了你的小提琴here

Answer 6

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

轮廓在以下方面不同于边框：

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

非常尊重所有其他解决方案（理解这些解决方案很重要），尝试使用以下解决方案作为一个简单的解决方案：

outline: 1px solid black;

而不是

border: 1px solid black;

JSFiddle

干杯！

Answer 7

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