Почему мой тег span со значком со шрифтом поражен вертикальным полем? - PullRequest
Новая
       6

Почему мой тег span со значком со шрифтом поражен вертикальным полем?

0 голосов
/ 26 января 2019

Я всегда понимал, что на тег span НЕ влияет вертикальные поля, потому что это линейный элемент.

Однако, делая горизонтальную навигационную панель с использованием интервалов, которые содержали отличные от шрифта значки, я обнаружил, что мои удивительные шрифты пролеты реагируют на изменения вертикального поля. В дополнение к этому, изменение вертикального поля шрифта-удивительного промежутка в элементе div, который содержит регулярные промежутки, вызывает влияние на все промежутки. 

#regular {
  height: 100px;
  width: 100px;
  background-color: #8cff5f;
  float: left;
}

#regular span {
  margin-top: 100px;
}

#fontawesome {
  height: 100px;
  width: 100px;
  background-color: #5f9fff;
  float: left;
}

#fontawesome span{
  margin-top: 100px;
}

#multispan {
  margin-left: 100px;
  float: left;
  width: 250px;
  height: 100px;
  background-color: #c85fff;
}

#multispan span {
  margin-top: 100px;
}

#fontawesome-multispan {
  float: left;
  margin-top: 50px;
  width: 250px;
  height: 100px;
  background-color: #855fff;
}
.fas.fa-laptop {
  margin-top: 100px; /*Affects all spans? O_o*/
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div id="regular">
  <span>SPAN</span>
</div>


<div id="fontawesome">
  <span class="fas fa-user"></span>
</div>

<div id="multispan">
  <span>SPAN01</span>
  <span>SPAN02</span>
  <span>SPAN03</span>
</div>

<div id="fontawesome-multispan">
  <span>SPAN01</span>
  <span>SPAN02</span>
  <span>SPAN03</span>
  <span class="fas fa-laptop"></span>
</div>

Вот пример , чтобы лучше проиллюстрировать то, что я испытываю.

Кто-нибудь знает, почему это происходит?

1 Ответ

0 голосов
/ 26 января 2019

Сначала шрифт с потрясающим шрифтом равен inline-block, поэтому логично, чтобы на них влиял запас, а выравнивание по умолчанию - базовая линия, поэтому другой диапазон перемещается.Например, сделайте выравнивание сверху, чтобы они не двигались.

Достаточно изменить выравнивание только значка 

#regular {
  height: 100px;
  width: 100px;
  background-color: #8cff5f;
  float: left;
}

#regular span {
  margin-top: 100px;
}

#fontawesome {
  height: 100px;
  width: 100px;
  background-color: #5f9fff;
  float: left;
}

#fontawesome span{
  margin-top: 100px;
}

#multispan {
  margin-left: 100px;
  float: left;
  width: 250px;
  height: 100px;
  background-color: #c85fff;
}

#multispan span {
  margin-top: 100px;
 vertical-align:top;
}

#fontawesome-multispan {
  float: left;
  margin-top: 50px;
  width: 250px;
  height: 100px;
  background-color: #855fff;
}
.fas.fa-laptop {
  margin-top: 100px; /*Affects all spans? O_o*/
 vertical-align:top;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div id="regular">
  <span>SPAN</span>
</div>


<div id="fontawesome">
  <span class="fas fa-user"></span>
</div>

<div id="multispan">
  <span>SPAN01</span>
  <span>SPAN02</span>
  <span>SPAN03</span>
</div>

<div id="fontawesome-multispan">
  <span>SPAN01</span>
  <span>SPAN02</span>
  <span>SPAN03</span>
  <span class="fas fa-laptop"></span>
</div>
...