时间戳

首页 > 解决方案 > 如何从 div 内部的 div 中删除额外的不可见空间，使其与父 div 的高度相同？

html - 如何从 div 内部的 div 中删除额外的不可见空间，使其与父 div 的高度相同？

问题描述

我正在制作一个简单的顶部导航栏，左侧是图像，右侧是按钮。这是HTML：

.topnav {
  background-color: #333;
  overflow: hidden;
}

#logo {
  float: left;
}

.topnav img {
  height: 4.5rem;
  padding-left: 35px;
}

#nav {
  overflow: hidden;
  float: right;
  padding: 10px 35px 10px 0px;
}
<div class="topnav">
  <div id="logo">
    <img src="./img/logo.png"></img>
  </div>
  <div id="nav">
    <a class="active" href="#home">Home</a>
    <a href="products">Products</a>
    <a href="contact">Contact</a>
    <a href="about">About</a>
  </div>
</div>

问题是，当我检查#nav 时，底部有这个不可见的空间，在填充之后。我做错了什么或者我必须做些什么来解决它？

编辑：确定差距的新屏幕截图。它位于填充（如浅绿色所示）和#topnav 的底部之间

标签： htmlcss

解决方案

正如@TemaniAfif建议的那样：

图像比菜单高。降低图像的高度，增加meny的填充等

推荐阅读