Question

我很困惑。 #top div在它的底部有一个奇怪的额外空间，设置高度当然有效，但问题是我想添加后兼容性，所以如果自定义字体不加载，它使用Verdana，这是更宽，所以它需要更多的地方，如果导航栏变大，它就不适合#top

代码是：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sidebar test</title>
</head>
<style>
div {
border: 1px solid #999;
}

body { font-family: Verdana, sans-serif; font-size: 17px; }

#navbar {
border-radius: 6px;
overflow: hidden;
display: inline-block;
margin: 0;
padding: 0;
}

#navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
float: left;
}

#navbar ul li {
display: inline;
color: black;
text-decoration: none;
}

#navbar ul a {
float: left;
padding: 10px 18px;
text-decoration: none;
color: black;
background-color: #f1f1f1;
-webkit-transition: background-color 0.02s;
transition: background-color 0.02s;
}

#navbar ul a:hover {
background-color: #e6e6e6;
}

#navbar ul a:selected {
background-color: #c7c7c7;
}

#content {
padding: 35px 50px 60px 50px;
}

#container {
width: 900px;
margin: 20px auto;
border-radius: 5px;
box-shadow: 0px 2px 2px 1px #d5d5d5;
}

</style>
<body>
<div id="container">

<div id="top">
<a href="#"><img alt="logo" height="27px" src="http://static.tumblr.com/zicio7x/Tphntwm0j/yvemiro.svg"></a>
<div id="navbar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
<div id="content">
Content
</div>
</div>
</body>
</html>

Answer 1

默认情况下，内联元素与基线垂直对齐。现在导航栏包含一个图像和相邻的菜单栏，所以它必须上下移动一点才能对齐它们。

解决方案：提供这些内容vertical-align:middle（或任何其他不需要将块移出中心的值）。

div {
  border: 1px solid #999;
}
body {
  font-family: Verdana, sans-serif;
  font-size: 17px;
}
#top > a > img {             /* this was added */
  vertical-align: middle;
}
#navbar {
  border-radius: 6px;
  overflow: hidden;
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;    /* and this */
}
#navbar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  float: left;
}
#navbar ul li {
  display: inline;
  color: black;
  text-decoration: none;
}
#navbar ul a {
  float: left;
  padding: 10px 18px;
  text-decoration: none;
  color: black;
  background-color: #f1f1f1;
  -webkit-transition: background-color 0.02s;
  transition: background-color 0.02s;
}
#navbar ul a:hover {
  background-color: #e6e6e6;
}
#navbar ul a:selected {
  background-color: #c7c7c7;
}
#content {
  padding: 35px 50px 60px 50px;
}
#container {
  width: 900px;
  margin: 20px auto;
  border-radius: 5px;
  box-shadow: 0px 2px 2px 1px #d5d5d5;
}

<div id="container">

  <div id="top">
    <a href="#">
      <img alt="logo" height="27" src="http://static.tumblr.com/zicio7x/Tphntwm0j/yvemiro.svg">
    </a>
    <div id="navbar">
      <ul>
        <li><a href="#">Link 1</a>
        </li>
        <li><a href="#">Link 2</a>
        </li>
        <li><a href="#">Link 3</a>
        </li>
        <li><a href="#">Link 4</a>
        </li>
      </ul>
    </div>
  </div>
  <div id="content">
    Content
  </div>
</div>

div底部奇怪的额外空间

1 个答案: