条形高度忽略文本本身的高度

Question

到目前为止，这是我的代码。问题是顶杆太薄，它意味着顶部链条周围有20px的填充物，但顶部杆的总高度只有40px，因此似乎没有考虑到高度链接本身（即栏应该更高）。我该如何解决这个问题？

＆＃13;

＆＃13;

    body {
      padding: 0;
      margin: 0;
      background-color: white;
      font-family: sans-serif;
    }
    
    header {
      display: block;
      padding: 20px;
      background-color: #F9F9F9;
    }
    
    #headerbar {
      position: relative;
    }
    
    .container {
      width: 80%;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .logo {
      position: absolute;
      left: 0;
    }
    
    .post {
      position: absolute;
      right: 0;
    }

＆＃13;

   <header>
      <div id="headerbar" class="container">
        <a href="#" class="logo">Logo</a>
        <a href="#" class="post">Post</a>
      </div>
    </header>
    

＆＃13;

＆＃13;

＆＃13;

Answer 1

正如@Darren在评论中所说，问题在于absolute定位（See this answer for more details how it works）。解决此问题的一种方法是使用float，并在其后清除。

Clearfix styles from HTML5Boilerplate：

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

＆＃13;

＆＃13;

    body {
      padding: 0;
      margin: 0;
      background-color: white;
      font-family: sans-serif;
    }
    
    header {
      display: block;
      padding: 20px;
      background-color: #F9F9F9;
    }
    
    #headerbar {
      position: relative;
    }
    
    .container {
      width: 80%;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .logo {
      float:left;
    }
    
    .post {
      float:right;
    }
    
    .clearfix:before,
    .clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    .clearfix:after {
        clear: both;
    }

＆＃13;

   <header>
      <div id="headerbar" class="container clearfix">
        <a href="#" class="logo">Logo</a>
        <a href="#" class="post">Post</a>
      </div>
    </header>

＆＃13;

＆＃13;

＆＃13;

JSFiddle

Answer 2

对.logo和.post类

的更改

    body {
      padding: 0;
      margin: 0;
      background-color: white;
      font-family: sans-serif;
    }
    
    header {
      display: block;
      padding: 20px;
      background-color: #F9F9F9;
    }
    
    #headerbar {
      position: relative;
    }
    
    .container {
      width: 80%;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .logo {
      position: relative;
    }
    
    .post {
      position: relative;
      float: right;
    }

   <header>
      <div id="headerbar" class="container">
        <a href="#" class="logo">Logo</a>
        <a href="#" class="post">Post</a>
      </div>
    </header>
    

Answer 3

＆＃13;

＆＃13;

body {
      padding: 0;
      margin: 0;
      background-color: white;
      font-family: sans-serif;
    }
    
    header {
      display: block;
     
      background-color: #F9F9F9;
    }
    
    #headerbar {
      
    padding: 20px;
      position: relative;
    }
    
    .container {
      width: 80%;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .logo {
      padding-bottom:50px;
      
     
    }
    
    .post {
      float:right;
    }

＆＃13;

<header>
      <div id="headerbar" class="container">
        <a href="#" class="logo">Logo</a>
        <a href="#" class="post">Post</a>
      </div>
    </header>

＆＃13;

＆＃13;

＆＃13;

Answer 4

在旁注中，我没有看到添加任何框大小，字体大小和行高。这些都应该协同工作，以帮助纠正整个设备的间距问题。