保證金頂部行爲不如預期

我創建了這個快速jsfiddle項目來幫助你。保證金頂部行爲不如預期

爲什麼margin-top爲#container從html推動整個body向下時，我希望它從#containerWrapper推#container？

這個想法是讓容器內的所有內容在菜單下放置一個邊距。

2011-11-20 vvMINOvv

這是通過margin-collapse這恰好兩個相鄰的邊緣引起的。內邊緣會塌陷到外邊緣，並且像外容器塊上的邊緣一樣。

如果您只想在#containerWrapper上應用保證金，您可以使用padding-top或在#containerWrapper和其外部塊容器之間輸入border。

2011-11-20 08:34:14 steveyang

雖然有用，但增加了一個可怕的滾動條（因爲高度設置爲100％），但該文章非常有用，而且我能夠通過稍微重新安排我的HTML來克服此崩潰。乾杯。 – vvMINOvv

爲此，你可使用填充頂

2011-11-20 07:54:37

@Ankit_Gautam比沒有好，但如果我想給它一個不同的背景，那麼我有點擰。你知道它爲什麼會這樣嗎？ – vvMINOvv

然後你可以使用邊框：＃000000 100px solid;在#containerwrapper – 2011-11-20 11:35:48

感謝您的幫助@Ankit_Gautam您的補救措施奏效，但對我的喜好有些過於冒昧，我最終改變了我的HTML結構以解決問題。乾杯。 – vvMINOvv

回答