元素变得不必要的边距

正如你所看到的那样，nav元素有点太多的顶部填充。虽然这些链接的轮廓线位于正确的位置，但还是有一些额外的烦人空间。这是我的代码：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"/> 
     <title>'''+title+'''</title> 
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css"/> 
     <link rel="icon" type="image/x-icon" href="/favicon.ico"/> 
     <link rel="shortcut icon" href="/favicon.ico"/> 
     <style> 
      @import url(http://fonts.googleapis.com/css?family=Merriweather:400,700); 
      html, body { 
      margin: 0; 
      background: #333333; 
      height: 100%; 
      position: relative; 
      font-family: "merriweather"; 
      overflow-y: hidden; 
      } 
      h1 { 
      font: bold 40pt roboto, arial, sans-serif; 
      margin: 0; 
      background: yellow; 
      padding: 30px; 
      } 
      nav { 
      display: inline-block; 
      } 
      nav a { 
      cursor: pointer; 
      font: bold 18px roboto; 
      display: inline-block; 
      transition-duration: 0.2s; 
      padding: 15px 30px; 
      background: linear-gradient(
      #FF9900, #FF9900 50%, #333333 50%, #333333 
      /*outline: none;*/ 
      ); 
      background-size: 100% 200%; 
      color: black; 
      } 
      nav a:hover { 
      background-position: 100% 100%; 
      color: yellow; 
      } 
      nav a:focus { 
      outline:none; 
      } 
      #content-white-bkg { 
      background: white; 
      padding: 30px; 
      margin: 15px; 
      box-sizing: border-box; 
      overflow-y: scroll; 
      } 
      *:not(nav) > a:link { 
      cursor: pointer; 
      color: #FF9900; 
      transition-duration: 0.35s; 
      /*border-bottom: 1px solid #FF9900;*/ 
      } 
      *:not(nav) > a:visited { 
      color: #FF6600; 
      cursor: pointer; 
      transition-duration: 0.35s; 
      } 
      *:not(nav) > a:hover, *:not(nav) > a:focus { 
      color: black; 
      outline: none; 
      } 
      a { 
      text-decoration: none; 
      color: black; 
      } 
      nav > a.selected { 
      background: #333333; 
      color: yellow; 
      text-shadow: 0 0 3px #FF9900, 0 0 5px #FF9900, 0 0 7px #FF9900, 0 0 10px #FF9900, 0 0 15px #FF9900; 
      transition-duration: 0.5s; 
      } 
      nav > a.selected:hover { 
      color: #333333; 
      } 
      ::selection { 
      background: #FF7700; 
      } 
      ::-webkit-selection { 
      background: #FF7700; 
      } 
      ::-moz-selection { 
      background: #FF7700; 
      } 
      h3 { 
      font: bold 18px nunito; 
      margin-top: 0; 
      }     
     </style> 
    </head> 
    <body> 
     <h1 title='MUCAS: Multi-User Chat Application Server'> 
      <span><img width="95" height="53" title="" alt="" src="https://lh3.googleusercontent.com/-JNE2j3gX9mc/Vfn58paI2oI/AAAAAAAABRI/dqt4nqR5dZ4/w426-h238/MUCAS%2Blogo.jpeg"/></span> 
      <nav><a href="/" id="nav-/" tabindex="-1">Home/chat</a><a href="/login" id="nav-/login" tabindex="-1">Log in</a><a href="/sign-up" id="nav-/sign-up" tabindex="-1">Sign up</a><a href="/about" id="nav-/about" tabindex="-1">About MUCAS</a><a href="/contact" id="nav-/contact" tabindex="-1">Contact me</a></nav> 
     </h1> 
     <div id="content-white-bkg"> 
      '''+body+''' 
      <script> 
       var cwb = document.getElementById("content-white-bkg"); 
       document.getElementById("content-white-bkg").style.height = (window.innerHeight-200)+"px"; 
       window.onresize = function() { 
        document.getElementById("content-white-bkg").style.height = (window.innerHeight-200)+"px"; 
       } 
       var path = window.location.pathname; 
       document.getElementById("nav-"+path).className = "selected"; 
      </script> 
     </div> 
    </body> 
</html>

任何人都可以帮助我吗？这是一个布局问题，还是其他？

来源

2015-09-16 Robert Moore

试试这个：

nav a { 
    vertical-align: top; 
}

来源

2015-09-16 23:48:18

这只会与显示工作：表 –

@ErikIsaksen，这个属性也解释与inline-block的显示。我在小提琴上试过了，它可以工作。 – saeraphin

工作，但仍有一点额外的底部填充。 –

检查浏览器中的开发工具。选择导航元素并查看与该元素关联的CSS面板。查看继承的样式和计算的样式。 nav上的边距或填充是否继承？也许它是一个父或子元素被计算为零。这可能是链接，列表，列表项目或父项目。如果您可以使用flexbox，我强烈建议它对齐组件和布局。

来源

2015-09-17 10:22:09

您可以尝试

nav { 
    vertical-align: super; 
}

“垂直对齐：超级”将把您的“导航”为标。我试着把它放在你的代码中，发现它可行。如果你认为它可以解决你的问题，你可以尝试。谢谢。

来源

2015-09-17 10:37:45

请解释你的答案，简短的回答可能会被删除，否则你会得票的下降 – Suresh

@eirenaios谢谢。我对于stackoverflow很新。我正在尝试习惯它。我应该删除这个答案，以避免投票吗？请告诉我。 –

这应该做的伎俩：

nav a { 
    float: left; 
}

我也应该改变H1至div元素的语义。 H1用于例如页面标题，而不是包裹在一个导航栏和标志..

来源

2015-09-19 11:29:31 Koen

你就错了在这里做几件事情。您正在将一个导航项目和图像放置在标题元素内。你没有使用float来表示你想浮动的元素。周围

使用来代替。

我由jsfiddle表示浮子，不修正语义。

考虑做这样的事情，而不是：

<div class="header"> 
<img src="image.jpg"> 
<nav>...links here...</nav> 
</div>

来源

2015-10-02 13:50:29

元素变得不必要的边距

回答

相关问题