CSS頂部邊距

我正在寫一個網站，我有一些保證金問題。CSS頂部邊距

我有下面的HTML代碼：

<div id="mainBody"> 
    <div class="subTitle" id="backgroundTitle" > 
     <h3> 
      Background 
     </h3> 
    </div> 
</div>

我的CSS代碼如下：

#mainBody{ 
    height:200px; 
    width: 500px; 
    margin-top: 0px; 
    margin-left: auto; 
    margin-right: auto; 
} 


.subTitle { 
    margin-top=0px; 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
} 


h3 { 
    margin-top:100px; 
    margin-bottom:0px; 
}

我期待的結果是，以「mainbody」 div有0像素上邊距而h3裏面有100px的上邊距。然而，我得到的是，「mainBody」div與h3一起下移，這意味着它們相對於頁面的頂部具有100px的頂邊距。

有誰知道爲什麼會發生這種情況？

非常感謝！

來源

2014-01-26 Monster Hunter

相鄰邊距：http://www.w3.org/TR/CSS21/box.html#collapsing-margins – CBroe

謝謝！ @CBroe，這清除了我的困惑 –

將display:inline-block;添加到h3元素類。

h3 { 
    margin-top:100px; 
    margin-bottom:0px; 
    display:inline-block; 
}

Js Fiddle Demo

來源

2014-01-26 04:52:02 Sachin

-1

我不知道你真正需要的<h3> - 你可以只風格的字幕文本。

CSS

#mainBody{ 
    height:200px; 
    width: 500px; 
    margin-top: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    border: 1px solid black; 
} 
.subTitle { 
    margin-top=0px; 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 70px; 
    border: 1px solid red; 
    font-size: 26px; 
    font-weight: bold; 
    text-align: center; 
    border-top: 6px solid red; 
}

HTML

<div id="mainBody"> 
    <div class="subTitle" id="backgroundTitle" > 
     Background 
    </div> 
</div>

FIDDLE

來源

2014-01-26 04:56:49 TimSPQR

我看不出有任何問題！請參閱Fiddle。我向元素添加了邊框以清楚地看到元素位置。

注意：我已在FF 12.0 LTS上測試FF 26.0，Chrome 32.0。

這是它的外觀：

enter image description here

我添加邊框，看元素邊界：

#mainBody{ 
    ... 
    border:1px solid red; 
} 

.subTitle { 
    ... 
    border:1px solid green; 
} 


h3 { 
    ... 
    border:1px solid blue; 
}

來源

2014-01-26 04:59:14 RaviH

_「我添加了邊界以查看元素邊界」_ - 由此，您切換了相鄰邊距的效果... – CBroe

哇！我的壞...等一下..然後當我們不需要它們時，我們可以使用不可見邊框來關閉這種效果。 – RaviH

在工作流程中，你將需要刪除崩潰，對你可能需要這個http://nicolasgallagher.com/micro-clearfix-hack/

來源

2014-01-26 05:34:43

回答

相關問題