HTML-контент неожиданно корректирует мой CSS

У меня есть компонент React, который разделен на 3 части и содержит 3 разных значения данных: дату, название и сумму. Макет выглядит хорошо и выровнен, но когда я добавляю значение в первый раздел (красный), он настраивает мой CSS очень странным образом, и я не могу понять, почему. Первое изображение показывает сам компонент, второе изображение показывает компонент с содержимым HTML внутри него.

Расход.js

  <div className="expense">
  <div className="date">
        <h6>DEMO!</h6>
  </div>
  <div className="title">

  </div>
  <div className="amount">

  </div>

Расход.css

.expense {
    border: 1px darkslategrey solid;
    height: 100px;
    display: flow-root;
}

.date {
    display: inline-block;
    background-color: darkred;
    width: 20%;
    height: 100%;
}

.title {
    display: inline-block;
    background-color: darkorange;
    width: 60%;
    height: 100%;
}

.amount {
    display: inline-block;
    background-color: darkgreen;
    width: 20%;
    height: 100%;
}

enter image description here

Проверяли ли вы в своих браузерах инструменты разработчика, чтобы увидеть, кто/где устанавливает поля в h6?

A Haworth 09.04.2022 18:23

Вы имеете в виду "неожиданно"?

Sean 09.04.2022 18:32
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
2
28
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Добавьте vertical-align: top к трем компонентам (inline-block). Значение по умолчанию для этого — baseline, это то, что вы видите на втором изображении.

На самом деле вам не нужно добавлять его три раза, но вы можете сделать это так:

.expense > div {
  vertical-align: top;
}

Полный код (преобразованный в обычный HTML/CSS):

.expense {
  border: 1px darkslategrey solid;
  height: 100px;
  display: flow-root;
}

.expense>div {
  vertical-align: top;
}

.date {
  display: inline-block;
  background-color: darkred;
  width: 20%;
  height: 100%;
}

.title {
  display: inline-block;
  background-color: darkorange;
  width: 60%;
  height: 100%;
}

.amount {
  display: inline-block;
  background-color: darkgreen;
  width: 20%;
  height: 100%;
}
<div class="expense">
  <div class="date">
    <h6>DEMO!</h6>
  </div><div class="title">

  </div><div class="amount">

  </div>
</div>

Другие вопросы по теме