Заполнение родительского по отношению к марже ребенка

Когда я хочу разместить некоторый (логически значимый) div внутри (логического) контейнера div с некоторым пространством, как показано ниже,

div within div with space

какой из двух способов был бы более логично правильным?

  • Задайте свойство заполнения контейнера
  • Задайте свойство margin div, которое находится внутри

Иногда у меня есть несколько элементов в контейнере:

multiple divs within a container div

Для таких случаев мне нужно было бы установить пространство между элементами независимо от пространства, окружающего элементы. В промежутке между я не могу использовать свойство заполнения контейнера, и мне нужно идти с полями (-left или -right) внутри элементов. Принимая это во внимание, для установки пространства между контейнером и элементами, мне интересно, имеет ли смысл устанавливать границы (-left, -right, -top, -bottom) элементов или заполнение контейнера.

Я использую flexbox. И у меня также есть настройка как box-sizing: border-box; , Я могу свободно использовать селектор CSS, такой как nth-child если это необходимо.

ОТВЕТЫ

Ответ 1

Я предпочитаю устанавливать margin на div который находится внутри контейнера.

Предположим, что черный div ниже - внешний контейнер с display: flex, width: 300px и height: 200px width: 300px. Когда вы назначаете padding: 30px дополнение к внешнему div, это приведет к 360px в ширину и 260px в высоту. Учитывая, что вы не будете ожидать растяжения контейнера, это повлияет на элементы вокруг контейнера div. Следовательно, лучше использовать margin во внутреннем div.

enter image description here

Когда вы назначаете границу между внутренним div и контейнером, фактический внешний div не будет перемещаться, и маржа будет влиять только на внутренний div, что не влияет на элементы вокруг него.

Если вы используете box-sizing: border-box; то все будет изменяться соответствующим образом, так что это полностью зависит от того, какой фактический размер должен быть. Использование margin/padding на внутренних элементах будет правильным.

Ответ 2

Подумайте, какой тип желоба вы хотите добавить. Разделять элементы друг от друга? Создать пространство внутри элемента?

Для желоба со всех сторон элемента, как синий в вашем примере:

enter image description here

Здесь я бы использовал прописку на контейнере. Логично, что именно то, что я хочу, так зачем считать что-нибудь еще?

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

enter image description here

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

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

Кроме того, вы можете захотеть большего количества этих прекрасных зеленых элементов в новой строке. Обычно я очищаю каждую строку, используя элемент, который обертывает всю строку любым подходящим способом для очистки поплавков, поэтому имеет смысл разделять строки с разницей. Очевидно, что здесь возникает один и тот же конфликт с родительским дополнением, но он легко обрабатывается одинаково (т.е. Удаляет край из последней строки).

Итак, одним словом:

  • Заполнение родительских элементов для желоба между его ребрами и его дочерними элементами.
  • Маржа для разделения элементов с одним и тем же родителем друг от друга.
  • Удалите поля у указанных детей, когда его маржа соединяется с родительским дополнением (первым и/или последними детьми в строке, последним дочерним элементом в столбце).

Отказ: так я поступаю. Я не могу обещать ему самый эффективный способ сделать что-то, но это способ, который имеет для меня самый лучший смысл.

Ответ 3

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

Тем не менее, вы должны попытаться объединить логически связанные правила. Например, когда у вас есть два элемента HTML на веб-сайте, которые служат для сходной цели, например, ваш внешний <div> и другой аналогичный блок (который не должен содержать отступы), тогда, при прочих равных условиях, лучше установить margin на внутреннем <div>.

Если, однако, вы размещаете более одного элемента во внешнем <div>, тогда вы действительно должны использовать отступы, потому что это касается всех внутренних элементов сразу. Ответ @zzzzBov работает также, но он полагается на разваливание маржи, с которым сложно справиться.

edit: В вашей второй ситуации я обычно комбинирую padding и margin, как это:

.outer {
    padding: 10px 15px 10px 5px
}

.inner {
    margin-left: 10px
}

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

Ответ 4

Это зависит от того, как должен выглядеть ваш последующий контент. Если у вас будет несколько внутренних <div> (зеленых), разделенных аналогичным количеством интервалов, имеет смысл использовать margin чтобы свернуть маржу, чтобы divs отображались как:

+-------
|        <- blue
|  +----
|  |     <- green
|  |
|  +----
|
|  +----
|  |     <- green
|  |
|  +----
|
+-------

Ниже приведен пример некоторых различных вариантов.