Как избежать коллапса полей двух элементов внутри их соответствующих родителей?

Как предотвратить схлопывание полей обоих внутренних div?

Вот Stackblitz

.block {
    margin: 8px 0;
    height: 20px;
    width: 40px;
    border: 1px solid red;
}

<div>
    <div class="block"></div>
</div>
<div>
    <div class="block"></div>
</div>

тут может пригодиться - stackoverflow.com/q/19718634/10749726

— 09.04.2022 09:51

css

09.04.2022 09:45

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...

Четыре эффективных способа центрирования блочных элементов в CSS

У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...

Современные подходы к организации и работе с CSS в проекте

Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.

Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)

Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...

Именование классов CSS: Конвенция именования BEM

Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...

Поговорим о глассморфизме (Glassmorphism)

В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Режим макета сетки не сворачивает поля:

body {
  display: grid;
}

.block {
  margin: 8px 0;
  height: 20px;
  width: 40px;
  border: 1px solid red;
}

<div>
  <div class="block"></div>
</div>
<div>
  <div class="block"></div>
</div>

09.04.2022 10:08

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

Почему активный переключатель не работает в приведенном ниже коде?

Имеет ли значение порядок параметров в методах classList?

Есть ли способ создать форму тени блока, отличную от элемента?

Нужно гибкое решение для переноса 3 элементов списка в строку.

Медиа-запросы в css не работают на телефонных устройствах

Vuetify - кнопка Prepend справа от ввода текстового поля

Как предотвратить перенос DIV на вторую строку?

Как мне исправить мой массив JavaScript, когда он возвращается как неопределенный?

Изменить ширину полосы прокрутки на <aside>

Когда я масштабирую элемент, я хочу видеть вертикальное переполнение, но устанавливаю невидимым горизонтальное переполнение.

Как избежать коллапса полей двух элементов внутри их соответствующих родителей?

Ответы 1

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

Похожие вопросы