css - Why does adding a border change the position of my nav bar? -
see 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; } i know has line-height property, don't understand how works.
edit: i've read through documentation of line-height, don't understand it.
the "issue" facing related collapsing margins between parent , kid element.
parent , first/last child
if there no border, padding, inline content, or clearance separate margin-top of block margin-top of first kid block, or no border, padding, inline content, height, min-height, or max-height separate margin-bottom of block margin-bottom of lastly child, margins collapse. collapsed margin ends outside parent.
source : mdn
the default styling of <ul> element includes margin-top. collapses parent container (nav) when don't give border it.
this why th ul element "moves" downwards when set border it.
css
No comments:
Post a Comment