Why does a nested HTML element make my CSS jump?
问题 Here's a puzzle. Basic page, one element: http://jsfiddle.net/PZj6t/ HTML: <div id="container"></div> CSS: body, html { height: 100%; margin: 0; padding: 0; background-color: black; } #container { position: relative; margin: 0 auto; width: 400px; height: 100%; background-color: #666; } That one looks how I want, with the #container neatly flush to the top. But when I add a nested element: http://jsfiddle.net/PZj6t/1/ HTML: <div id="container"> <nav id="topnav"></nav> </div> CSS (new):