Html 这个额外的空间是从哪里来的？

正如您在这里和下图中所看到的，我的菜单项与“logo”和“social”并不完全一致。此外，菜单类别（菜单I、菜单2等）和子项之间存在巨大差距。当我查看我的代码时，我没有看到额外的填充或任何类似的东西会导致这种类型的问题。有什么想法吗？非常感谢

Html, body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: 'Open Sans', sans-serif; 
}

#logo {
    position: absolute;
    top: 35px;
    left: 20px;
    color: #000;
    font-size: 20px;
}

/* mainmenu */

#mainmenu {
    float:right;
    margin-top: 35px;
    padding-bottom: 10px; 
    overflow: hidden;
}
#mainmenu ul {
    float: right;
    margin: 0;
    color: #000;
    list-style: none;
}
#mainmenu ul li {
    display: inline-block;
    float: left;
    width: 140px;
    line-height: 20px;
}
#mainmenu>ul>li {
    margin-left: 20px;
}
#mainmenu ul li a {
    display: block;
    text-decoration: none;
    font-weight:600;
    font-size: 12px;
}
#mainmenu ul li a, #mainmenu ul ul:hover li a {
    color: #333;
    -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -webkit-transition-duration: .4s, .4s, .4s, .4s;
    -moz-transition-duration: .4s, .4s, .4s, .4s;
    -ms-transition-duration: .4s, .4s, .4s, .4s;
    -o-transition-duration: .4s, .4s, .4s, .4s;
    transition-duration: .4s, .4s, .4s, .4s;
    -webkit-transition-property: all, -webkit-transform;
    -moz-transition-property: all, -moz-transform;
    -ms-transition-property: all, -ms-transform;
    -o-transition-property: all, -o-transform;
    transition-property: all, transform;
}
#mainmenu ul ul li a:hover, #mainmenu ul ul li.current-menu-item a {
    color: #005EBC;
    -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -webkit-transition-duration: .4s, .4s, .4s, .4s;
    -moz-transition-duration: .4s, .4s, .4s, .4s;
    -ms-transition-duration: .4s, .4s, .4s, .4s;
    -o-transition-duration: .4s, .4s, .4s, .4s;
    transition-duration: .4s, .4s, .4s, .4s;
    -webkit-transition-property: all, -webkit-transform;
    -moz-transition-property: all, -moz-transform;
    -ms-transition-property: all, -ms-transform;
    -o-transition-property: all, -o-transform;
    transition-property: all, transform;
}

#social {
position: absolute;
    float:right;
    right: 10px;
    Color: blue;
    margin-top: 35px;
}

HTML

Logo


菜单一





菜单2







菜单3







菜单4






社会的

您的

h5

元素上有边距。要修复此问题，只需将其放在CSS中：

h5 {
    margin:0;
}

---

首先，您应该使用CSS重置，因为如果您不重置元素，浏览器会将一些默认样式应用于您的元素，而您不需要这些样式，是吗？你可以用谷歌搜索出来，会得到很多，如果你想简单地保留它，但是你想重置它，你可以使用下面的代码块并将它粘贴到你的CSS中

* {
    margin: 0;
    padding: 0;
}

（减少间距）

似乎你应该学习定位，你正在使用

position:absolute元素，不在元素内部包裹
位置：相对容器，这样，您的
位置：绝对元素将在野外流动。另外，我认为您不想使用
absolute
，在这里使用
float
是合适的

看看定位有多重要


（锯
位置：相对；
在那里？）

每个菜单之间的水平间距是由于您使用的是显式
width


此外，如果使用
浮点
，则不需要
显示：内联块


我建议您学习和
同样在JSFIDLE上，您可以使用提供的功能重置默认值

要访问它，请查看左侧窗格，单击
Fiddle Options
并勾选
Normalized CSS
，然后点击
Run
查看更新的代码。
您应该阅读CSS框模型。除此之外，您使用的是position:absolute:这实际上会在调整屏幕大小时产生问题。正确使用浮标对现场布局很重要。我刚刚为您解决了一些问题，是重新修改的菜单

希望这有帮助

下面是我重写的CSS的一小部分

#social {
border:1px solid green;
    float:left;
    width:120px;
    Color: blue;

}

#mainmenu {
    float:left;
    border:1px solid red;
    padding-bottom: 10px; 
    overflow: hidden;
}


#logo {
    float:left;
    color: #000;
    font-size: 20px;
    border:1px solid black;

    width:150px;
}

您看过DOM检查工具了吗？您好-我该怎么做？TKST取决于哪个浏览器，但大多数浏览器都内置了DOM检查器工具。谢谢。从其他人的回答中了解到，与我所做的相比，使用“浮动”是一种更干净的方式。问题：使用您建议的代码，3个div彼此左对齐。然而，我希望logo DIV与屏幕左侧对齐，main menu+social DIV与右侧对齐。我试着在主菜单和社交网站上写“float:right”，但没用。有什么想法吗？很多感谢我试图将我的社交DIV包装在我的主菜单DIV中，并在#social的CSS代码中添加了“position:absolute；”。它奏效了，但不确定这是否是最好的方法。它现在位于菜单的右侧。关于您的第一条评论，这不是一个有效且推荐的方法。您还需要对标记中的社交和主菜单div重新排序。这就像是从右到左书写你的英语。
#social {
border:1px solid green;
    float:left;
    width:120px;
    Color: blue;

}

#mainmenu {
    float:left;
    border:1px solid red;
    padding-bottom: 10px; 
    overflow: hidden;
}


#logo {
    float:left;
    color: #000;
    font-size: 20px;
    border:1px solid black;

    width:150px;
}