Должен ли интервал между родительским и дочерним контейнерами принадлежать родительскому или дочернему контейнеру?

Question

Я изо всех сил пытаюсь определить, где в моем CSS отступы / поля должны идти, чтобы сохранить разделение между родительским и дочерним контейнерами. Например, если у вас есть родительский div с двумя вложенными дочерними элементами, и вам нужно иметь интервал между дочерними элементами равным 10 пикселям, а также чтобы дочерние элементы были расположены на расстоянии 10 пикселей от родительского элемента; Затем вы бы добавили padding к родительскому div {padding: 10px}, а затем просто добавили 10px поля между дочерними элементами? Или вы оставите родителя на 0 и попросите детей определить, в каком отделении они нуждаются друг от друга, а также от своих родителей?

Вот скрипка, показывающая оба примера .

Answer 1

Привет всем, я не эксперт по HTML, я ученик, так что я узнал от веб-индустрии, поэтому я делюсь от имени этого.

По моему мнению, Padding - это внутреннее пространство элемента, а margin - это внешнее пространство элемента.

Paddings: - Если вы будете использовать padding в родительском контейнере, вам придется настроить ширину и высоту родительского контейнера, в противном случае parent добавит отступ в его ширине и высоте.

Поля: - Если вы будете использовать поля в дочернем контейнере, вам не нужно трогать ширину и высоту родительского контейнера, потому что дочерний контейнер будет начинаться с требуемой области.

или посмотрите ваш обновленный пример скрипки, я играл с полями в дочернем контейнере, потому что когда я использовал заполнение в родительском контейнере, я настраивал ширину и высоту этого, но когда я использовал поля, не нужно настраивать родительский контейнер, смотрите демонстрацию : - http://jsfiddle.net/WSTv6/1/

и можете узнать больше о полях и отступах

Answer 2

Я обычно иду на заполнение родительского контейнера. Тогда разница между детьми. Например, если бы у меня был ul с 10 li детьми, я бы добавил отступы 10px к ul, 10px margin-bottom к li и 0px margin-bottom к li: last-of-type ...

Я не знаю, это зависит от ситуации, и, наверное, от вашей интерпретации. В моем примере, так как я считаю, что пространство между ul и li принадлежит ul, я делаю его отступом ul. Пространство между ли принадлежит им, поэтому я делаю это на полях.

Не очень помогает, а?

Answer 3

Для меня это зависит полностью от семантического значения рассматриваемых узлов - что является родителем, что является детьми?

Родитель "хочет" пространство внутри него, чтобы держать его содержимое подальше от его границ (заполнение)?Или дети «хотят» расстояния между собой и между собой и своим родителем (маржа)?

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

В вашем случае, не зная дополнительного значения, кажется, что дети хотят быть в 10 пикселях от всего, поэтому я бы дал им margin: 10px; со всех сторон.Разрыв полей между двумя детьми оставил бы там только 10-пиксельный разрыв, и они были бы на расстоянии 10 пикселей от всего, что их окружало.

Answer 4

Атрибут поля CSS находится снаружи, а отступ - в блоке DIV.Я не уверен, что это именно то, что вы хотите - документировано здесь:

Когда использовать margin против padding в CSS

Я только что подтвердил, и атрибут margin работает внутритакже вложенный DIV.Так что это альтернатива заполнению.

ЕСЛИ позиция в классе абсолютна, заполнение не должно иметь значения.Но если вы используете абсолютные позиции, все DIV должны иметь абсолютные позиции, чтобы избежать потенциального конфликта, и вам необходимо знать минимальный размер экрана клиента (абсолютная может быть не очень хорошая идея).

ПРИМЕЧАНИЕЕсли любой из ваших клиентов все еще использует IE5, в этом браузере есть ошибка заполнения, которая должна была быть исправлена ​​в IE6.http://forums.devshed.com/css-help-116/css-padding-inside-absolute-div-70789.html