爲什麼添加邊框會改變導航欄的位置？

看到這個CodePen：http://codepen.io/anon/pen/KypbC。爲什麼添加邊框會改變導航欄的位置？

HTML

<body> 
     <nav> 
      <ul> 
       <li>One</li> 
       <li>Two</li> 
       <li>Three</li> 
      </ul> 
     </nav> 
    </body>

CSS

body { 
    font-family: "Helvetica Neue"; 
} 
nav { 
    height: 50px; 
    background-color: #EEE; 
/* border: 1px solid #DDD; 
*/} 
nav ul li { 
    display: inline; 
    padding: 20px; 
    line-height: 50px; 
} 
.nav-inverse { 
    background-color: black; 
    color: lightGray; 
}

我知道它有什麼做的line-height財產，但不明白它是如何工作的。

編輯：我讀過line-height的文檔，但不明白。

什麼是「線盒」？
是什麼讓內聯元素「替換」與「未替換」？ ...

來源

2014-10-05 Adam Zerner

這不是相對於邊界。您正面臨「摺疊邊距」，請參閱此示例，並在ul上設置0邊距（請記住，瀏覽器會爲其設置默認邊距）http://codepen.io/web-tiki/pen/yBtur – 2014-10-05 14:50:59

更多關於摺疊邊距的信息（向下滾動到「摺疊父母和子女元素之間的邊距」）http://www.sitepoint.com/web-foundations/collapsing-margins/ – 2014-10-05 14:55:55

謝謝，這很有幫助！ – 2014-10-05 14:57:17

的「問題」你是FAC ing與父代和子代元素之間的摺疊邊距有關。

家長和第一/最後一個子

如果沒有邊框，填充，內嵌內容，或間隙塊的邊距其第一的邊距分開子塊或無邊框，填充，內聯，高度，最小高度或最大高度以將塊的邊緣底部與其最後一個子塊的邊緣底部分開，然後這些邊緣摺疊。父母不在之外，摺疊的保證金結束。

源：MDN

的<ul>元素的默認樣式包括邊距。當您不給它一個邊框時，它會與父容器（nav）摺疊。

這就是爲什麼當您爲其設置邊框時，元素「向下移動」的原因。

來源

2014-10-05 14:58:45

你應該使用display:inline-block並始終使用box-sizing:border-box這給內部邊框或將是100%寬度+邊框2px（右+左），因此將超越100％，滾動條會出現

的問題是你給line-height + padding如此高度增加

Codepen

來源

2014-10-05 14:51:22

爲什麼？我不是特別有興趣讓它工作。我有興趣瞭解爲什麼事情按照他們的方式工作。 – 2014-10-05 14:54:33

爲什麼添加邊框會改變導航欄的位置？

回答

相關問題