Отступы внутри div: Отступ внутри блока div (CSS)

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Как лучше задавать отступы в потоке модулей и элементов?

Сегодняшний совет — особенный: я хочу поспорить с другим советчиком и поделиться альтернативной точкой зрения на управление отступами в ЦСС.

Вёрстка слева направо и сверху вниз

В своём совете Игорь Петров предлагает управлять вертикальными отступами, задавая только нижние отступы элементам:

Вёрстка слева направо и сверху вниз

/* Внутри текстовой полосы
   отступ после абзаца равен 36 пк,
   отступ после перечня равен 54 пк */
.  textBox p {
  margin-bottom: 36px;
}
.textBox ul {
  margin-bottom: 54px;
}

Здесь и в примерах ниже мы считаем, что отступы элементов ранее были сброшены в ноль

По моему опыту, такая система вёрстки быстро обрастает исключениями. Представьте, что после картинок должен быть отступ в 72 пикселя, но подписи должны стоять на расстоянии в 18 пикселей. Приходится «подтягивать» подпись к картинке отрицательным отступом вверх:

.textBox img {
  margin-bottom: 72px;
}
.textBox img + .caption {
  margin-top: -54px;
}

Мы не только добавили исключение, изменив направление отступа, но и ввели магическую константу: почему именно 54, откуда взялось это число?

Мне кажется, что проблема не в направлении отступов, а в том, что мы делаем отступы свойством

Если запретить элементам контролировать отступы и начать задавать отступы отношениям между ними, код станет проще и нагляднее:

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

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

/* Отступ по умолчанию.
   Что бы ни шло после картинки,
   отступ между ней и следующим элементом
   будет равен 72 пк */
.textBox img + * {
  margin-top: 72px;
}
/* Особый отступ в отдельной паре.
   Если после картинки идёт подпись,
   она получает уменьшенный отступ */
.textBox img + .caption {
  margin-top: 18px;
}

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

Можно смотреть на это как на полуапроши и кернинг. Полуапроши в буквах задают базовые отступы букв от любых соседних.

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

Этот же подход работает и в случае, когда отступы явно задаются через специальный элемент‑обёртку, например, .rows или .stack:

Было

/* Элементы внутри .rows и .stack
   считаем «этажами», после которых
   идёт отступ в 72 пк */
.rows > *:not(:last-child) {
  margin-bottom: 72px;
}
/* Аналогичные стили, но с отменой
   отступа у последнего элемента */
.stack > * {
  margin-bottom: 72px;
}
.stack > *:last-child {
  margin-bottom: 0;
}

Стало

.rows > * + * {
  margin-top: 72px;
}
.stack > * + * {
  margin-top: 72px;
}

Ещё по теме

• Margin considered harmful

• Axiomatic CSS and Lobotomized Owls

• The Stack

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка

Свежак

html — свойство CSS для заполнения текста внутри div

спросил 9 лет, 5 месяцев назад

Изменено 1 год, 3 месяца назад

Просмотрено 209 тысяч раз

Есть ли способ добавить элементу div отступ ВНУТРИ его границы? Например, в настоящее время весь текст внутри моего основного 9Элемент 0011 div

Вот снимок экрана, иллюстрирующий, что у меня сейчас есть:

• html
• css

Искомое свойство CSS — padding. Проблема с отступами заключается в том, что они добавляются к ширине исходного элемента, поэтому, если у вас есть div шириной 300 пикселей и вы добавляете к нему отступы в 10 пикселей, ширина теперь будет 320 пикселей (10 пикселей слева и 10 пикселей слева). право).

Чтобы предотвратить это, вы можете добавить box-sizing: border-box; к div, это заставляет его поддерживать назначенную ширину, даже если вы добавляете отступы. Таким образом, ваш CSS будет выглядеть так:

 div {
    box-sizing: граница-коробка;
    отступ: 10 пикселей;
}
 

вы можете узнать больше о размерах блоков и их общей поддержке браузерами здесь:

https://www.paulirish.com/2012/box-sizing-border-box-ftw/

Здесь я вижу много ответов что вы вычитаете из ширины div и/или используете box-sizing, но все, что вам нужно сделать, это применить дополнение к дочерним элементам рассматриваемого div. Так, например, если у вас есть такая разметка:

 <дел>
    
Найти агентов