Html 在div的底部有一个奇怪的额外空间_Html_Css

Html 在div的底部有一个奇怪的额外空间

html css

Html 在div的底部有一个奇怪的额外空间,html,css,Html,Css,我很困惑#top div的底部有一个奇怪的额外空间，设置高度当然有效，但问题是我想添加回兼容性，所以如果自定义字体不加载，它会使用Verdana，它更宽，所以会占据更多的位置，如果导航栏变大，它将无法正确地适应顶部代码是： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sidebar test</title> </head> <st

我很困惑#top div的底部有一个奇怪的额外空间，设置高度当然有效，但问题是我想添加回兼容性，所以如果自定义字体不加载，它会使用Verdana，它更宽，所以会占据更多的位置，如果导航栏变大，它将无法正确地适应顶部

代码是：

<!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>


边栏测试
div{
边框：1px实心#999；
}
正文{字体系列：Verdana，无衬线；字体大小：17px；}
#导航栏{
边界半径：6px；
溢出：隐藏；
显示：内联块；
保证金：0；
填充：0；
}
#纳瓦尔{
列表样式类型：无；
填充：0；
保证金：0；
浮动：左；
}
#纳瓦尔里酒店{
显示：内联；
颜色：黑色；
文字装饰：无；
}
#导航栏{
浮动：左；
填充：10px 18px；
文字装饰：无；
颜色：黑色；
背景色：#f1f1；
-webkit过渡：背景色0.02s；
过渡：背景色0.02s；
}
#导航栏ul a：悬停{
背景色：#e6；
}
#导航栏ul a：已选择{
背景色：#c7c7c7；
}
#内容{
填充：35px 50px 60px 50px；
}
#容器{
宽度：900px；
保证金：20px自动；
边界半径：5px；
盒影：0px 2px 2px 1px#d5d5d5；
}






内容

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

解决方案：给出这些值

垂直对齐：中间（或任何其他不需要将块移出中心的值）

div{
边框：1px实心#999；
}
身体{
字体系列：Verdana，无衬线；
字号：17px；
}
#top>a>img{/*这是添加的*/
垂直对齐：中间对齐；
}
#导航栏{
边界半径：6px；
溢出：隐藏；
显示：内联块；
保证金：0；
填充：0；
垂直对齐：中间；/*和此*/
}
#纳瓦尔{
列表样式类型：无；
填充：0；
保证金：0；
浮动：左；
}
#纳瓦尔里酒店{
显示：内联；
颜色：黑色；
文字装饰：无；
}
#导航栏{
浮动：左；
填充：10px 18px；
文字装饰：无；
颜色：黑色；
背景色：#f1f1；
-webkit过渡：背景色0.02s；
过渡：背景色0.02s；
}
#导航栏ul a：悬停{
背景色：#e6；
}
#导航栏ul a：已选择{
背景色：#c7c7c7；
}
#内容{
填充：35px 50px 60px 50px；
}
#容器{
宽度：900px；
保证金：20px自动；
边界半径：5px；
盒影：0px 2px 2px 1px#d5d5d5；
}











内容
默认情况下，内联元素与基线垂直对齐。现在导航栏包含一个相邻的图像和菜单栏，因此它必须将它们上下移动一点才能对齐
解决方案：给出这些值垂直对齐：中间（或任何其他不需要将块移出中心的值）

div{
边框：1px实心#999；
}
身体{
字体系列：Verdana，无衬线；
字号：17px；
}
#top>a>img{/*这是添加的*/
垂直对齐：中间对齐；
}
#导航栏{
边界半径：6px；
溢出：隐藏；
显示：内联块；
保证金：0；
填充：0；
垂直对齐：中间；/*和此*/
}
#纳瓦尔{
列表样式类型：无；
填充：0；
保证金：0；
浮动：左；
}
#纳瓦尔里酒店{
显示：内联；
颜色：黑色；
文字装饰：无；
}
#导航栏{
浮动：左；
填充：10px 18px；
文字装饰：无；
颜色：黑色；
背景色：#f1f1；
-webkit过渡：背景色0.02s；
过渡：背景色0.02s；
}
#导航栏ul a：悬停{
背景色：#e6；
}
#导航栏ul a：已选择{
背景色：#c7c7c7；
}
#内容{
填充：35px 50px 60px 50px；
}
#容器{
宽度：900px；
保证金：20px自动；
边界半径：5px；
盒影：0px 2px 2px 1px#d5d5d5；
}











内容
请提供一个可运行的测试用例：识别无法解释的差距来源的最佳方法是检查页面（在Chrome中，右键单击->“检查元素”）。在元素中徘徊，通常会很快找到导致它的原因。或者，考虑提供一个可测试的例子：<代码>样式>代码>元素在<代码>头<代码>之外。我不认为这很重要，但仍然如此。哎哟，事实上，我忘记了其他人在JSFIDLE上的链接：请提供一个可运行的测试用例：识别无法解释的差距的最佳方法是检查页面（在Chrome中，右键单击->Inspect element）。在元素中徘徊，通常会很快找到导致它的原因。或者，考虑提供一个可测试的例子：<代码>样式>代码>元素在<代码>头<代码>之外。我不认为这很重要，但仍然如此。哎哟，事实上，我忘记了其他人在JSFIDLE上的链接：嘿，这实际上是可行的，这么简单的问题，这么简单的解决方案，你真的一石二鸟，因为我还想把这两个元素放在一个层次上，这样看起来会很好。非常感谢：）嘿，这真的很有效，这么简单的问题，这么简单的解决方案，你真的一石二鸟，因为我也想把这两个元素放在一个层次上，这样看起来会很好。非常感谢：）