元素變得不必要的邊距

正如你所看到的那樣，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

元素變得不必要的邊距

回答

相關問題