H1毛利意外溢出集裝箱

在下面的代碼片段中，爲什麼h1上的邊距溢出Console__Content的頂部？H1毛利意外溢出集裝箱

Console__Content有足夠的空間，我希望h1被定位，以便我沒有得到黑色矩形上方的白色帶。

我錯過了什麼？

.Container { 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 1px solid red; 
 
} 
 

 
.Console { 
 
    height: 100%; 
 
} 
 

 
.Console__Content { 
 
    font-family: monospace; 
 
    color: #fff; 
 
    background-color: black; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="Container"> 
 
    <div class="Console"> 
 
    <div class="Console__Content"> 
 
     <h1>Test!</h1> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-22 Andrea Casaccia

這是由摺疊引起的利潤率：https://www.sitepoint.com/collapsing-margins/ – sol

這不一樣其他**問**不是在重複我的意見。 – weBBer

只要給<H1>的父display: inline-block;

你的情況我用 -

.Console__Content { 
    display: inline-block; 
}

這是因爲大多數瀏覽器將顯示與元素以下默認值：

h1 { 
    display: block; 
    font-size: 2em; 
    margin-top: 0.67em; 
    margin-bottom: 0.67em; 
    margin-left: 0; 
    margin-right: 0; 
    font-weight: bold; 
}

由於h1是塊元素可以通過元素與inline-block屬性增加，這將解決您的問題僅包裹。

.Container { 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 1px solid red; 
 
} 
 

 
.Console { 
 
    height: 100%; 
 
} 
 

 
.Console__Content { 
 
    font-family: monospace; 
 
    color: #fff; 
 
    background-color: black; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: inline-block; 
 
}

<div class="Container"> 
 
    <div class="Console"> 
 
    <div class="Console__Content"> 
 
     <h1>Test!</h1> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-22 09:45:00 weBBer

H1毛利意外溢出集裝箱

回答

相關問題