При изменении текста в блоках появляются незаданные отступы

Question

Я создал 4 карточки и написал в них некоторый текст. При этом, если текст разный, то появляются какие-то отступы, которые портят сетку (карточки должны быть параллельны друг другу.

* {
  margin: 0;
  padding: 0;
  font-weight: normal;
  box-sizing: border-box;
  font-family: 'Inter', 'Arial', sans-serif;
}

body {
  background-color: cornsilk;
}

.header {
  width: 100%;
  height: 100vh;
  background-color: rgb(41, 41, 41);
  text-align: center;
}

.overlay {
  height: 100%;
  display: flex;
}

.header-title {
  color: cornsilk;
  font-size: 200px;
  margin: auto;
  text-transform: uppercase;
}

.content {
  width: 1000px;
  font-size: 0;
  margin: 100px auto 50px;
}

.card {
  width: 400px;
  height: 250px;
  background-color: white;
  margin-right: 200px;
  margin-bottom: 50px;
  margin-top: 50px;
  padding: 45px;
  display: inline-block;
  box-shadow: 5px 5px 10px coral;
}

.no-right-margine {
  font-size: 15px;
  margin-right: 0px;
}

.card-image {
  height: 100%;
  float: left;
}

.card-text {
  font-size: 15px;
  height: 50px;
}

.card-title {
  font-size: 25px;
}

.footer {
  height: 300px;
  display: flex;
  background-color: rgb(41, 41, 41);
}

.footer-author {
  font-size: 24px;
  color: cornsilk;
  margin: auto;
}

<header class="header">
  <div class="overlay">
    <h1 class="header-title">Заголовок</h1>
  </div>
</header>
<section class="content">
  <div class="card">
    <img class="card-image" src="https://mamarabotaet.ru/netcat_files/266/667/h_1d4b3c2853dbf94cb436cb905b7a5b0a">
    <h2 class="card-title">Заголовок</h2><br>
    <h3 class="card-text">Текст</h3>
  </div>
  <div class="card no-right-margine">
    <img class="card-image" src="https://mamarabotaet.ru/netcat_files/266/667/h_1d4b3c2853dbf94cb436cb905b7a5b0a">
    <h2 class="card-title">Заголовок</h2><br>
    <h3 class="card-text">Текст немножечко побольше</h3>
  </div>
  <div class="card">
    <img class="card-image" src="https://mamarabotaet.ru/netcat_files/266/667/h_1d4b3c2853dbf94cb436cb905b7a5b0a">
    <h2 class="card-title">Заголовок</h2><br>
    <h3 class="card-text">Текст</h3>
  </div>
  <div class="card no-right-margine">
    <img class="card-image" src="https://mamarabotaet.ru/netcat_files/266/667/h_1d4b3c2853dbf94cb436cb905b7a5b0a">
    <h2 class="card-title">Заголовок</h2><br>
    <h3 class="card-text">Текст</h3>
  </div>
</section>
<footer class="footer">
  <h4 class="footer-author">&copy; NikFive 2020</h4>
</footer>

Answer 1

Вас спасёт добавление всего лишь одной строчки кода в CSS. Классу card допишите

vertical-align: top;

Можно взять себе за правило, что в подобных вашей ситуациях, когда есть множество "карточек" в виде inline-block элементов этим самым "карточкам" всегда нужно прописывать vertical-align: top;.

А если чуть подробнее, то, насколько я помню, по умолчанию инлайн-блок элементы имеют vertical-align: baseline;, от того и такое поведение как в вашем примере.

Советую глянуть эту статью. Удачи! :)

* {
  margin: 0;
  padding: 0;
  font-weight: normal;
  box-sizing: border-box;
  font-family: 'Inter', 'Arial', sans-serif;
}

.body {
  background-color: cornsilk;
}

.header {
  width: 100%;
  height: 100vh;
  background-color: rgb(41, 41, 41);
  text-align: center;
}

.overlay {
  height: 100%;
  display: flex;
}

.header-title {
  color: cornsilk;
  font-size: 200px;
  margin: auto;
  text-transform: uppercase;
}

.content {
  width: 1000px;
  font-size: 0;
  margin: 100px auto 50px;
}

.card {
  vertical-align: top;
  width: 400px;
  height: 250px;
  background-color: white;
  margin-right: 200px;
  margin-bottom: 50px;
  margin-top: 50px;
  padding: 45px;
  display: inline-block;
  box-shadow: 5px 5px 10px coral;
}

.no-right-margine {
  font-size: 15px;
  margin-right: 0px;
}

.card-image {
  height: 100%;
  float: left;
}

.card-text {
  font-size: 15px;
  height: 50px;
}

.card-title {
  font-size: 25px;
}

.footer {
  height: 300px;
  display: flex;
  background-color: rgb(41, 41, 41);
}

.footer-author {
  font-size: 24px;
  color: cornsilk;
  margin: auto;
}

<header class="header">
  <div class="overlay">
    <h1 class="header-title">Заголовок</h1>
  </div>
</header>
<section class="content">
  <div class="card">
    <img class="card-image" src="https://mamarabotaet.ru/netcat_files/266/667/h_1d4b3c2853dbf94cb436cb905b7a5b0a">
    <h2 class="card-title">Заголовок</h2><br>
    <h3 class="card-text">Текст</h3>
  </div>
  <div class="card no-right-margine">
    <img class="card-image" src="https://mamarabotaet.ru/netcat_files/266/667/h_1d4b3c2853dbf94cb436cb905b7a5b0a">
    <h2 class="card-title">Заголовок</h2><br>
    <h3 class="card-text">Текст немножечко побольше</h3>
  </div>
  <div class="card">
    <img class="card-image" src="https://mamarabotaet.ru/netcat_files/266/667/h_1d4b3c2853dbf94cb436cb905b7a5b0a">
    <h2 class="card-title">Заголовок</h2><br>
    <h3 class="card-text">Текст</h3>
  </div>
  <div class="card no-right-margine">
    <img class="card-image" src="https://mamarabotaet.ru/netcat_files/266/667/h_1d4b3c2853dbf94cb436cb905b7a5b0a">
    <h2 class="card-title">Заголовок</h2><br>
    <h3 class="card-text">Текст</h3>
  </div>
</section>
<footer class="footer">
  <h4 class="footer-author">&copy; NikFive 2020</h4>
</footer>

БЛОГ НА HUSL

При изменении текста в блоках появляются незаданные отступы

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