Фантомные пиксели в родительском контейнере в css
Если вы проверите высоту значка, это 16 пикселей, но по какой-то причине родительский контейнер имеет размер 18 пикселей.
Я играл с 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
Чтобы решить вашу проблему, мне потребовалось два шага.
Во-первых, у браузера есть собственные стили, которые он применяет к вашему контенту, и некоторые из них могут доставить вам проблемы. В вашем случае свойство line-height по умолчанию в вашем контейнере добавляет дополнительное пространство, поэтому установка его на 1 исправила это.
Во-вторых, даже после применения сброса высоты строки все еще оставался зазор в 1 пиксель, поэтому я провел некоторое исследование и, согласно этому ответу о Встроенные замененные элементы, из-за некоторого поведения элементов вам, возможно, придется также настроить свойство vertical-align.
В вашем случае применение свойства vertical-align к элементу i избавляет от 1 лишнего пикселя. Для свойства vertical-align можно задать значение top или bottom, и оно будет вести себя одинаково.
.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>@TemaniAfif Он используется в Сброс CSS Эрика Мейера, который, возможно, является самым популярным сбросом CSS.
проверьте это: jsfiddle.net/xmhqe94r/2 вы четко заметите разницу и то, как сужается пространство между текстом во втором блоке ... так что даже если он используется с сбросом CSS Эрика Мейера, это не очень хорошая идея. И в вашем случае это не нужно, достаточно выравнивания
Хотя я согласен с тем, что его не всегда хорошо сбрасывать, и я отредактировал свой ответ так, чтобы осталась только высота строки контейнера, я не мог получить дополнительное пространство, чтобы уйти без него. Если вы скопируете мой фрагмент и удалите часть с высотой строки, между значком и контейнером останется 1 пиксель.
хм, это странно, выравнивания должно быть достаточно ... нужно это проверить, похоже, есть особое поведение с потрясающим шрифтом, как с изображением или элементом встроенного блока, это не то же самое, и нам не нужна высота строки
Я согласен, что это странное поведение, и если вы обнаружите его до того, как у меня будет возможность, и вопрос не будет удален как дубликат, я буду более чем счастлив изменить свой ответ или удалить его, если вы напишете свой собственный.
Я уверен, что это проблема не только Font Awesome, я использовал font awesome для простоты в примере, но на самом деле у меня есть свой собственный шрифт. Я считаю, что это ошибка при рендеринге шрифтов для @ font-face.
сброс высоты строки - плохая идея очень .... как только вы начнете писать текст, вы увидите проблему, выравнивания достаточно