@rootnoroot

Как убрать отступ?

В общем ситуация
2 блока
у обеих есть серый фон (соединять в один не вариант)
в первом для параграфов даю margin 30px 0
и получается что отступы параграфов переносятся на отступы между блоками
либо я уже ничего не соображаю
поставил padding, но padding не то
для внуттр. элементов
6622877ec62f2148284489.png
  • Вопрос задан
  • 127 просмотров
Решения вопроса 2
В обычном CSS у нас марджины не ограничиваются границами родителя, они как-бы проникают сквозь его границы. Это очень толковое решение, но не всегда оно нам полезно. Как с этим бороться? Нам надо "обмануть" движок, и дать ему знать, что после последнего дочернего элемента у нас есть ещё какой-то контент, и чтобы марджин нашего последнего дочернего элемента не вылазил наружу, а "спотыкался" об этот невидимый контент.

Добавляем в начало и в конец родительского блока невидимый контент нулевой высоты при помощи ::after и ::before. При этом идеальным значением свойства display этого невидимого контента будет table, т.к. оно работает именно так, как нам надо, а именно, имеет нулевую высоту по умолчанию.



Если же, вдруг, вас по каким-то причинам не устраивает этот псевдо-контент внутри блока, то подобного поведения можно добиться при помощи обычного свойства overflow со значением hidden. (Однако при этом мы лишаемся некоторых других возможностей, потому что всё, что находится внутри этого блока, но должно выходить за его границы, будет скрываться.)



Ну, и на самый крайний случай, если уж и предыдущие два не устроят, то старый добрый float: left; никто не отменял ))))



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

Ответ написан
Комментировать
imko
@imko
Senior Scratch Developer
А может просто
:last-child {
    margin-bottom: 0;
}
?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы