html - css 边框会完全改变 div 大小吗?

标签 html css

<分区>

编辑:找到一个很好的链接来解释所有关于边界折叠的内容:

border collapse explained with examples

编辑结束。享受 :)

我没看懂... 为什么对我的 div 应用 1px 纯黑色边框会大大改变 div 的大小? (没有边框我可以看到一条相对较细的线作为我的背景颜色,有边框背景颜色的 øectangle 更宽,见图片) 这张照片没有应用边框: div without the border - see the relatively small background 现在看看这张照片(唯一的区别是边框……) div with border, suddenly the background is much bigger!

谁能解释一下边框如何对 div 大小产生如此大的影响/这里到底发生了什么?!

风格:

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

这里有一个 fiddle ,你可以玩一下: my fiddle 多谢, 吉米。

最佳答案

那是因为margin collapsing .

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

在第一张图片中,您的页眉元素(也许是 h1?)的边距在 div 之外折叠。边距不影响 div 的大小,而是将周围的元素推开。

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

关于html - css 边框会完全改变 div 大小吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30877275/

相关文章:

javascript - HTML 使 <option> 无效

javascript - 在 Chart.js 中将 Y 轴值从实数更改为整数

css - 如何链接组织github页面中的css文件

html - 如何垂直对齐多个表格列

jquery - 我们如何从现有图像中绘制 3D 建筑结构 Jquery,Css?

css - 使用 CSS 在 HTML5 中使按钮居中

javascript - 获取数据,函数 Error() { [native code] } <constructor> : "Function"

javascript - 创建 Accordion 选项卡并动态添加 ID 和链接以锚定到 jQuery 中的 ID

css - 字体文件夹未正确链接

css - 如何在CSS之前显示半张图片