奇怪的CSS填充屬性行爲與1px和無。有人可以解釋這個嗎？

（上SO第一個問題，沒有足夠的聲譽直接張貼圖片）

這裏是展示什麼是真正回事，填充收益率超過20 1px的，而評論圖像總共填充屬性會使邊框向下以滿足內容，而不是填充上面空白區域的內容。

這是我第一次做一個完整的網站，這是我一直沒有弄清楚的小錯誤之一。

div.main { 
    width: 50%; 
    margin: auto; 
    /*padding: 1px;*/ 
    text-align: center; 
    background-color: #DCD083; 
}

與

div.main { 
    width: 50%; 
    margin: auto; 
    padding: 1px; 
    text-align: center; 
    background-color: #DCD083; 
}

來源

2016-11-12 jujjyfruit

嗨，歡迎SO。很好的問題，但我們需要一些代碼來回答你。本節可能會幫助您編寫代碼示例http://stackoverflow.com/help/mcve –

哦，我屏蔽了我的代碼並將其添加到上面的圖像中。我一定會將它添加到帖子本身。謝謝！ – jujjyfruit

沒有html就很難給出任何有意義的答案。我認爲你回答這個問題的最好方法是提供html和css作爲可運行的代碼片段。 https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ –

我認爲你正在使用h1標記爲內部div文本。

這並不奇怪。像'h1'這樣的每個heading標記都會有line-height樣式屬性，它在您的示例中播放，其格式爲height。

一旦檢查通過使用font-size除去h1標籤如圖片斷

div.first { 
 
    width: 50%; 
 
    margin: auto; 
 
    /*padding: 1px;*/ 
 
    text-align: center; 
 
    background-color: #DCD083; 
 
} 
 
div.next { 
 
    width: 50%; 
 
    margin: auto; 
 
    padding: 1px; 
 
    text-align: center; 
 
    background-color: #DCD083; 
 
} 
 

 
div.with-font-size{ 
 
    font-size: 32px; 
 
    font-weight: 600; 
 
}

<div class="first"> 
 
    <h1> 
 
    TEAM ONE 
 
    </h1> 
 
</div> 
 
<div class="next"> 
 
    <h1> 
 
    TEAM ONE 
 
    </h1> 
 
</div> 
 
<hr/> 
 
<div class="first with-font-size"> 
 
    TEAM ONE 
 
</div> 
 
<!-- see the difference of 1px here --> 
 
<div class="next with-font-size"> 
 
    TEAM ONE 
 
</div>

來源

2016-11-12 05:22:30

奇怪的CSS填充屬性行爲與1px和無。有人可以解釋這個嗎？

回答

相關問題