內容高度的CSS邊框規範問題

我正在研究這個CSS，我已經在div中包裝了一篇文章。我已經給出了這兩個百分比的寬度，併爲div分配了填充。在我爲文章添加邊框之前，我的填充似乎「未應用」。您可以通過評論應用於文章的邊框來查看差異。我的文章高度縮水。這是爲什麼發生？內容高度的CSS邊框規範問題

<style> 
body{ 
    margin:100px; 
} 
.content{ 
width:100%; 
padding:.9746589%; 
background:green; 
    } 
    .content>article{ 
width:100%; 
background:yellow; 
border:1px solid red; 
} 

</style> 
     <div class="content" role="main"> 
      <article> 

       <p>This is my text!</p> 
      </article> 
     </div>

來源

2013-08-24 user1986244

您填充應用似乎非常好。 – falguni

檢查這小提琴它的工作..實際上p標籤添加裕度頂部和底部設置保證金零p標籤 –

似乎爲我工作。你在測試什麼瀏覽器？ – Spudley

，我們在您p元素默認邊距是collapsing你article元素。在向article添加邊框時，可以防止發生塌陷並使其包含p元素及其默認邊距。

您的.9746589％填充適用於這兩種情況，但由於您將它放在.content上，因此它實際上並不受其內部的article和之間的邊距摺疊的影響。但是，如果您要刪除即以及邊框，則所有元素的邊距都會摺疊，綠色背景將完全消失。換句話說，就像您的邊框在article和p之間如何屏蔽邊距摺疊一樣，您的填充也會阻止.content和article及其內容之間的邊距塌陷。

最後，邊距只能垂直摺疊，所以設置寬度永遠不會有所作爲。

來源

2013-08-24 06:14:59 BoltClock

你的解釋和你的參考是非常有用的，而我的另一個問題，在這個父母的孩子關係我的理解是什麼事是父母的內容，填充或邊界，以避免崩潰。這是正確的嗎？ – user1986244

@ user1986244：填充或邊框。參考鏈接包含所有的細節。 – BoltClock

-1

確保您有任何其他重寫的CSS代碼。而不是

padding:.9746589%;

使用

padding:.9746589% !important;

來源

2013-08-24 06:15:24 Josemon

內容高度的CSS邊框規範問題

回答

相關問題