在div問題中爲單個標題標記設置邊距

Question

下面我在div中有一個h3標記。

#one { 
    width:300px; 
    height:200px; 
    background-color:black; 
    color:white; 
} 

h3 { 
margin-top:20px; 
} 

    <div id="one"> 
<h3>Coming Soon My Tools</h3> 
</div>​ 

呈現時的div頂邊距被移動，而不是H3標籤的上邊距。看演示http://jsfiddle.net/EnigmaMaster/aZnjx/1/

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

如果我在h3標籤前面放入東西，那麼邊距就會適當地調整，如果我將display：inline-block添加到h3標籤，它也會正確呈現。 林沒有尋找一個解決我的問題。我在尋找關於這個問題的信息。有沒有其他人遇到過這個問題？

Answer 1

我現在找不到支持我想法的信息，但據我所知，div是一個沒有邊距的框。所以你會得到利潤率和h3利潤率的「利潤率崩潰」。如果在div和h3標籤之間添加任何文本，則實際上會創建一個新塊，並將h3邊距作爲該塊的偏移量添加。 向div添加1px邊框也一樣。那時的'崩潰'行爲就消失了。 如上所述，我無法找到支持這一信息的信息，但是用您的url進行擺弄可以證明這種行爲。

Answer 2

只需將它插入你的小提琴。我建議你也這樣做：

#one { 
    width:300px; 
    height:200px; 
    background-color:black; 
    color:white; 
    border: 1px solid 0000ff; 
} 

h3 { 
margin-top:20px; 
border: 1px solid #00ff00; 
} 

保證金似乎工作正常（我在IE7這裏）。距離在h3的頂部與div邊框之間創建。這是保證金。