簡體   English   中英

為什么兩個沒有邊距的div之間會出現空格?

[英]Why is there white space appearing between two divs that don't have margins?

我不敢相信我甚至都在問這個,但顯然周一早上進展不順利。 為什么我在這兩個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示例

這是由於利潤率下降所致。 簡而言之, p元素的margin-top導致div元素之間的空間。 要解決此問題,您可以將p元素的margin-top設置為0示例 )。 如果您仍然希望在p元素中的文本上方留出空格,則可以將padding-top設置為某個( 示例 )。 可替代地,還可以設定padding-top的的div比其他東西0 ,然后將同時使用padding-top的的divmargin-top的的p例如 )。 避免折疊邊緣和div頂部的額外空間的一點點是將值設置為padding-top計算0示例 )。

有關更多信息,請參閱CSS 3規范的“ 折疊邊距”部分

您還可以通過將div元素的display屬性顯式設置為block並將overflow屬性設置為hidden以及將邊距設置為0來嘗試解決此問題。填充應該無關緊要。

只是一個猜測,但它可能與最小高度和第一個div是空的有關。 刪除那個?

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM