上一个div应用边界正在增加其高度显著

我有一个只包含一个部门内的一个段落如下上一个div应用边界正在增加其高度显著

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Floating</title> 
     <link rel="stylesheet" type="text/css" href="block.css"> 
    </head> 
    <body> 
     <div id="parent"> 
      <p>Floating </p> 
     </div> 
    </body> 
</html>

的CSS也非常简单非常简单的页面

#parent { 
    border: 1px solid #f00; 
    background-color: #ff9; 
    max-width:1000px; 
} 

p { 
    background-color: #f00; 
}

的问题是在应用边框时，父级div的高度为82px，如chrome开发工具中所示。但是一旦我禁用边框，高度就会降低到50px。我只是不明白，为什么应用1px的边界造成这么大的高度差异？

在此先感谢！

来源

2014-12-27 Vsmaiil

我有一种感觉，这可能是由于折叠垂直边缘。当父母和孩子的垂直边缘没有被边界分开时，它们会崩溃。 – Terry 2014-12-27 20:36:24

它很有趣。我为你提供了一个小提琴：http://jsfiddle.net/ojbxpsLk/ – bwitkowicz 2014-12-27 20:48:48

使用CSS重置或标准化似乎解决了这个问题。另外，尝试添加* {margin：0; }并且有/无边框的行为变得一致，所以看起来它与Chrome的盒子模型解释有关。 – bwitkowicz 2014-12-27 20:54:01

您需要从元素中删除默认边距。 JSFIDDLE

p { 
    margin: 0; 
    color: #f00; 
}

来源

2014-12-27 20:53:48 JRulle

虽然有效，但它仍不能解释为什么会发生这种情况。 – bwitkowicz 2014-12-27 20:55:37

这是因为使用了标签。看看下面的演示与div代替p：

http://jsbin.com/ciwomayuri/1/

为了避免这种margin属性附加到p如下例：

http://jsbin.com/hifadijera/1/

正如JRulle说，有一个默认的对于p标签，每个浏览器的边际值都是默认的字体系列和字体颜色。

来源

2014-12-27 20:56:10 SaidbakR

这种行为是CSS2 Box Model的一部分，被称为“崩溃余量”。在各种情况下，包括父母/子女关系，两个要素的利润率合并为两者中最大的一个。如果没有其他内容或边界，这是正确的。

父级的边界防止其边际崩溃。一旦删除了边框，边距就会折叠成16px（p元素的默认边距）的一个边距，并且该边距将应用于外层元素（父层），这就是为什么背景色的父母不再可见。父级的内容区域已与其合并。

所以，如果你想有一个边界，但不希望周围的那款黄色的区域，您可以在p的边距设置为0，也可以边框添加到p，而不是父母。我想，知道原因，你可以找出最适合你的解决方案。 :-)

如果您认为我的解释有些简短，W3的解释太过于技术性，请务必阅读相当详细的explanation by SitePoint。

来源

2014-12-27 20:57:53 GolezTrol

这是因为所谓的“用户代理样式表”的风格发生的。默认情况下，标记的margin-top和margin-bottom = 1em。如果您从#parent中删除边框属性，则标签将不会更改其默认属性。您可以将其悬停在代码检查器中进行检查。由于父div没有边框，所以没有任何对象来自浏览器必须填写颜色＃ff9。总而言之，总高度为（包括边距）是永久性的。默认属性的优先级最低。所以如果你定义边缘顶部和边缘底部的，它将在你的完全控制下:)

来源

2014-12-27 21:01:51 Banzay

上一个div应用边界正在增加其高度显著

回答

相关问题