Почему слова не на одной линии?

Question

Эта проблема появляется тогда, когда я для .wrapper_block задаю font-size: 0;. Но я не могу не задавать этого параметра, так как у меня должны быть два элемента, которые находятся в одном ряду, а с помощью font-size: 0; я обнуляю отступы, которые идут по умолчанию между элементами inline-block.

Сделать это же с помощью flexbox я не могу. Так как у меня один элемент должен задвигаться за другой. Чтобы было более понятней о чем я говорю, вот фото:

А вообще почему font-size: 0; так влияет на шрифт, если потом я все равно задаю этому тексту свой font-size.

.wrapper_block {
  margin: 0 auto;
  font-size: 0;
}

img {
  padding-top: 30px;
  padding-bottom: 30px;
  display: inline-block;
  vertical-align: center;
}

.second_block {
  width: 435px;
  min-height: 360px;
  outline: 1px solid black;
  display: inline-block;
  vertical-align: center;
}

.head_block {
  min-height: 165px;
  border: 3px solid #b59f5b;
}

.footer_block {
  padding-left: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
}

.content_block {
  min-height: 165px;
}

i {
  font-size: 14px;
  display: inline-block;
}

.part_1 > p, .part_2 > p, .part_1, .part_2, .one, .two {
  display: inline;
}

.one, .two {
  color: #0f0d0e;
  font-size: 12px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" integrity="sha384-OLYO0LymqQ+uHXELyx93kblK5YIS3B2ZfLGBmsJaUyor7CpMTBsahDHByqSuWW+q" crossorigin="anonymous">


<div class="wrapper_block">
  <div class="second_block">
    <div class="head_block"></div>
    <div class="content_block"></div> 
    <div class="footer_block">
      <div class="part_1">
        <i class="far fa-comment"></i>
        <p class="footer_word one">24</p>
      </div>
      <div class="part_2">
        <div class="footer_word two">Share</div>
        
      </div>
    </div>
  </div>
</div>

Answer 1

Вы превращаете все элементы в строчные, чтобы они выстраивались друг за другом, при этом обнуляя размеры шрифтов, чтобы не было отступов от переносов в коде.
А затем, назначаете разным элементам в одной строке разные размеры шрифтов! Ну, как же тут шрифтам не плясать на такой весёлой дискотеке? Комментарии в коде:

.wrapper_block {
  margin: 0 auto;
  font-size: 0;
}

img {
  padding-top: 30px;
  padding-bottom: 30px;
  display: inline-block;
  vertical-align: center;
}

.second_block {
  width: 435px;
  min-height: 360px;
  outline: 1px solid black;
  display: inline-block;
  vertical-align: center;
}

.head_block {
  min-height: 165px;
  border: 3px solid #b59f5b;
}

.footer_block {
  padding-left: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
}

.content_block {
  min-height: 165px;
}

i {
  display: inline-block;
  /* Либо уменьшить размер шрифта здесь */
  font-size: 14px;
}

.part_1>p, .part_2>p, .part_1, .part_2, .one, .two {
  display: inline;
  /* Или подобрать значение для выравнивания по 
  вертикали элементов с разным размером шрифтов */
  vertical-align: top;
}

.one, .two {
  color: #0f0d0e;
  /* Либо Увеличить размер шрифта тут */
  font-size: 12px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" integrity="sha384-OLYO0LymqQ+uHXELyx93kblK5YIS3B2ZfLGBmsJaUyor7CpMTBsahDHByqSuWW+q" crossorigin="anonymous">

<div class="wrapper_block">
  <div class="second_block">
    <div class="head_block"></div>
    <div class="content_block"></div>
    <div class="footer_block">
      <div class="part_1">
        <i class="far fa-comment"></i>
        <p class="footer_word one">24</p>
      </div>
      <div class="part_2">
        <div class="footer_word two">Share</div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Почему слова не на одной линии?

Ответы (1 шт):