时间戳

首页 > 解决方案 > css中父容器上的幻象像素

html - css中父容器上的幻象像素

问题描述

如果您检查图标高度，它是 16px，但由于某种原因，父容器是 18px。

我一直在玩css，试图弄清楚为什么会发生这种情况，但运气不好。大概是什么蠢事。

PD：没有黑客...我知道我可以强制容器的高度，但我不想。我只想了解是什么产生了额外的像素。

.container {
  background-color: green;
}
i {
  background-color: pink;
  display:inline-block;
  margin:0;
  padding:0;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="container">
  <i class="fas fa-angry"></i>
</div>

我还检查了这个问题：div 内的图像在图像下方有额外的空间，但它似乎在调整时并没有解决问题vertical-align（display:block修复了问题，但我不想让图标成为块元素，因为它需要与文字一起去）

.container {
  background-color: green;
}
i {
  background-color: pink;
  display:inline-block;
  margin:0;
  padding:0;
  vertical-align:top;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="container">
  <i class="fas fa-angry"></i>
</div>

标签： htmlcssfont-awesome

解决方案

要解决您的问题，我需要两个步骤。

首先，浏览器有自己的样式，它适用于您的内容，其中一些可能会给您带来麻烦。在您的情况下，容器上的默认 line-height 属性会增加额外的空间，因此将其设置为 1 可以解决此问题。

其次，即使在应用行高重置后，仍然存在 1px 的间隙，所以我做了一些研究，根据这个关于Inline Replaced Elements的答案，由于元素的某些行为，您可能还需要调整 vertical-align 属性。

在您的情况下，在 i 元素上应用 vertical-align 属性可以消除 1 个额外的像素。垂直对齐属性可以设置为顶部或底部，它的行为相同。

.container {
  background-color: green;
  line-height: 1;
}

i {
  background-color: pink;
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: top;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="container">
  <i class="fas fa-angry"></i>
</div>

推荐阅读