图像变得比我想要的 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 {

  height: 52px; 

  width: 64px;

}

Answer 3

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