Question

我无法相信我甚至都在问这个问题，但显然周一早上进展不顺利。为什么我在这两个div元素之间留出空格？

<!DOCTYPE html>
<html>
<head>
 <title>Hello</title>
 <meta charset="UTF-8">
</head>
<body>
 <div style="margin:0;padding:0;min-height:200px;background-color:#c00;"></div>
 <div style="margin:0;padding:0;min-height:200px;background-color:#ccc;"><p>Hello</p></div>
</body>
</html>

jsFiddle Example

Answer 1

这是由于利润率下降所致。简而言之，margin-top元素的p会导致div元素之间的空格。要解决此问题，您可以将margin-top元素的p设置为0（example）。如果您仍希望在p元素中的文字上方留出空格，则可以将padding-top设置为某些内容（example）。或者，您也可以将padding-top的{{1}}设置为div以外的其他内容，然后使用两者 0 { {1}}和padding-top（example）的div。要避免在margin-top顶部折叠边距和额外空间，请将计算的值设置为p div {{3} }}）。

有关详细信息，请参阅example。

Answer 2

您还可以尝试通过将display元素的div属性显式设置为block，将overflow属性设置为hidden来尝试解决此问题并将边距设置为0.填充应该无关紧要。

Answer 3

只是一个猜测，但它可能与min-height和第一个div为空有关。删除那个？

为什么两个没有边距的div之间会出现空格？

3 个答案: