图像变得比我想要的 html 更大

Question

我正在学习 HTML 和 CSS，而且我也是一个新手，只是这么说。

我正在制作一个网站，我在顶部制作了一个水平导航栏，其中包含指向网站上其他页面的链接，以及一个图标。

当我在浏览器中观看我的网站并使用检查器工具检查元素时，列表元素“li.nav_bar_icon”变为80x82.55，徽标为64像素，通过填充获得8+8像素，但为什么它是82.55 1另一边？？？额外的 2.55 像素从何而来？

导航栏的代码如下所示：

HTML：

<div class="nav_bar">

  <ul>

    <li class="nav_bar_icon"><img class="icon" src="img/icon.png" alt="Icon"></li>

    <li><a class="nav_bar_button" href="index.html">Home</a></li>

    <li><a class="nav_bar_button" href="apps.html">Apps</a></li>

    <li><a class="nav_bar_button" href="images.html">Images</a></li>

  </ul>

</div>

和CSS：

.nav_bar ul {

  width: 100%;

  float: left;

  list-style-type: none;

  background-color: #00000f;

}

.nav_bar li {

  float: left;

}

.nav_bar_icon {

  float: left;

  padding: 8px;

}

.icon {

  height: 52px; 

}

.nav_bar_button {

  display: block;

  color: #008CFF;

  text-align: center;

  padding: 25px 20px;

  text-decoration: none;

}

Answer 1

同时设置高度和宽度是一个坏主意，因为它会改变比例。相反，请尝试使用 max-height 或 max-width 属性。如果使用高度，请将宽度设置为自动，如果使用宽度，请将高度设置为自动。额外的像素是因为它试图占据整个可用空间。您可以根据图像大小使用 max-height 或 max-width 限制它们。

Answer 2

那是因为您没有为图标图像提供宽度，只提供高度，因此浏览器会尝试调整其大小以使其与给定的高度看起来很好，您只需为图像添加宽度即可防止这种情况，您说的是64 然后像这样更改你的代码：.icon {&nbsp; height: 52px;&nbsp;&nbsp; width: 64px;}

Answer 3

也许是因为浏览器默认设置，即边距..尝试将它们设置为 0