Фантомные пиксели на родительском контейнере в CSS - PullRequest
Новая
       6

Фантомные пиксели на родительском контейнере в CSS

0 голосов
/ 06 октября 2018

Если вы проверяете высоту иконки, она равна 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>

1 Ответ

0 голосов
/ 06 октября 2018

Чтобы решить вашу проблему, мне потребовалось два шага.

Во-первых, у браузера есть свои собственные стили, которые он применяет к вашему контенту, и некоторые из них могут доставить вам неприятности.В вашем случае свойство line-height по умолчанию в вашем контейнере добавляет дополнительное пространство, поэтому установив его равным 1, мы установили это значение.

Во-вторых, даже после применения сброса высоты строки все еще оставался разрыв в 1px, поэтому я сделалнекоторые исследования и в соответствии с этим ответом о Inline Replaced Elements , из-за некоторого поведения элементов, вам, возможно, придется также настроить свойство вертикального выравнивания.

В вашем случае, применяя вертикальное-align свойство элемента i избавляет от 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>
...