Html css边框完全改变div大小？

编辑：找到一个很好的链接，解释了所有关于边框折叠的内容：

编辑结束。享受：）

我无法理解这一点。。。 为什么对我的div应用1px纯黑边框会大大改变div的大小？ （没有边框，我可以看到一条相对较细的线作为背景色，有边框，背景色的角度要宽得多，请参见图片） 此pic未应用边界： 现在看看这张照片（唯一的区别是边界…）

有人能解释一下边界是如何对div大小产生如此大的影响的吗/这里到底发生了什么

风格：

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

这是一把小提琴，你可以在上面玩： 谢谢，

---

Jimmy。

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

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

---

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

边距>边框>填充>实际元素大小

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

尝试手动设置这些值：

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

那是因为

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

在第一幅图像中，标题元素（a

h1

可能？）的边距在div外部塌陷。边距不影响div的大小，而是将周围的元素推开

---

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

页眉大小相同，只是背景不会填充指定为元素边距的区域。您的

h1

在顶部和底部都有默认边距，这不是由要填充的浏览器计算的。为了强制执行，您可以使用

overflow:hidden是一个老把戏，覆盖了99%的著名的
clearfix
类（用于浮点修复）：


#标题{
背景：黄色；
溢出：隐藏；
}
#边栏{
浮动：左；
宽度：30%；
背景：绿色；
}
#内容{
浮动：左；
宽度：70%；
背景：石灰；
}

标题
边栏
内容
一个完美的例子，为什么有时使用边框代替
可以解决很多头痛的问题

轮廓与边框的不同之处如下：

大纲不占用空间，而是在内容上方绘制

考虑到所有其他解决方案（理解这些解决方案很重要），请尝试使用以下简单的解决方案：

outline: 1px solid black;

而不是

border: 1px solid black;


干杯
 将h1标记上的边距设置为0：

h1 {
    margin:0;
}

我更新了你的小提琴
添加
display:block
是否会与边框具有相同的效果？另外，请提供一个代码以查看其他情况。没有，它已经应用了display:block。这看起来像是一个填充问题。我注意到在第一个示例中，padding是1px，而在第二个示例中，padding没有设置在元素上。可能元素继承了额外的填充？如果你做了一把小提琴，而不是一个填充物的问题，那会有帮助的。你可以看到我禁用了它。我将很快做一个小提琴（以前从未做过-总是第一次：））这并不能解释问题，但问题也应该改进。对不起，我刚刚读了border和div大小，哈哈。看看你的代码没问题。我唯一看到的变化是内容size@JimmyBoy在这两种情况下，请尝试将边距和填充设置为0，以确保。听起来不错，将验证并接受您的答案：）谢谢该链接解释得很好，非常感谢！它是
#标题
（很可能是
h1
）中有边距的内容。默认情况下，它的边距用
#标题
折叠。添加边框可防止该元素将其边距与
#标题
组合。
h1 {
    margin:0;
}