为什么添加边框会改变导航栏的位置？

看到这个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

为什么添加边框会改变导航栏的位置？

回答

相关问题