CSS, вложенные блоки div и поля против заполнения

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

вот типичный пример,

во-первых, простым языком:

  • ситуация: у нас есть контейнер div, внутри которого находится элемент абзаца.

  • цель: оставить пространство 12 пикселей между внутренней стороной блока div и внешней стороной абзаца.

  • вариант а) применить 12 пикселей заполнения к контейнеру div

  • вариант б) применить поля 12 пикселей к элементу абзаца

или, если хотите, HTML:

<div id="container">
    <p>Hello World!</p>
</div>

и CSS:

вариант а)

div#container {padding: 12px;}

вариант б)

p {margin: 12px;}

Ваше здоровье!

Джон


padding css margin semantics
person jon    schedule 14.09.2009    source источник
comment
я думал, есть вопрос .. он есть?   -  person jrharshath    schedule 14.09.2009
comment
семантическая методология? Я не думаю, что это означает то, что вы думаете.   -  person annakata    schedule 14.09.2009

Ответы (7)


arrow_upward
3
arrow_downward

Лично я предпочитаю вариант А. Почему? Скажем, теперь мне нужно добавить другие элементы HTML в div, и я хочу, чтобы заполнение сохранялось, мне не пришлось бы добавлять другие правила в мои файлы CSS, чтобы он работал.

person DLS    schedule 14.09.2009
comment
для меня это лучший ответ. но вы должны учитывать вашу конкретную ситуацию. см. ответ Итая Моава. - person jon; 14.09.2009

arrow_upward
4
arrow_downward

Paddings и margins дают тот же эффект, за исключением следующих случаев (я могу пропустить некоторые):

  1. У вас есть какие-то свойства фона. Маржа их не достанет.
  2. У тебя есть граница
  3. Вы используете TD (без полей)
  4. Два вложенных элемента. Поля свернуты вместе, а отступы - нет.
  5. (необходимо проверить это) Вероятно, они по-разному влияют на ширину и высоту элемента. (Если кто-то знает лучше, пожалуйста, отредактируйте это).
person Itay Moav -Malimovka    schedule 14.09.2009

arrow_upward
3
arrow_downward

Это ошибка css, вот примеры:

http://creexe.zxq.net/div-issue-padding.html = проблема с заполнением

http://creexe.zxq.net/div-issue-margin.html = проблема с маржей

красный и зеленый теги div в примерах были созданы css свойством TOP, но у него есть свои недостатки: TOP, BOTTOM и т. д. работают только тогда, когда положение тега div является абсолютным и относительным, но не статическим.

person saurabh    schedule 01.12.2011

arrow_upward
2
arrow_downward

Это зависит от того, чего вы пытаетесь достичь визуально. Будет ли container иметь другие дочерние элементы, которые могут выступать в желоб с обеих сторон абзаца? Если так, то запас имеет больше смысла. Но если container должен иметь 12-пиксельный промежуток для всех элементов, точка, имеет смысл использовать отступы, чтобы избежать применения полей к нескольким наборам элементов.

Вообще говоря, вы всегда хотите, чтобы абзацы имели вертикальные поля, чтобы обеспечить единообразие интерлиньяжа абзаца.

person Rex M    schedule 14.09.2009
comment
что вы имеете в виду под желобом? :) - person jon; 14.09.2009
comment
@jon желоб - это неиспользуемое пространство на одной или нескольких сторонах текста. Он отличается от поля, потому что графический элемент может иметь смысл висеть в желобе. - person Rex M; 14.09.2009

arrow_upward
1
arrow_downward

Лично я бы выбрал вариант a #container {padding: 12px;}, потому что он ясно дает понять, что все дочерние элементы должны находиться на расстоянии 12 пикселей от границы этого div.

Если я хочу, чтобы другие элементы находились на расстоянии более 12 пикселей от границы #container, я применяю к этому элементу столько же маржи.

Ваше здоровье!

person jrharshath    schedule 14.09.2009

arrow_upward
0
arrow_downward

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

person meder omuraliev    schedule 14.09.2009

arrow_upward
0
arrow_downward

Разница в том, где находится граница.

Граница располагается SMACK DAB посередине полей и отступов. Если вы указываете поля, это пробел ВНЕШНИЙ границы.

Если вы укажете отступы, это будет пробел ВНУТРИ границы (сдвигает границу дальше от элемента)

Не могу показать вам здесь из-за удаления css, но попробуйте это:


<body style="background-color: #aaa">
<p style="background-color: #aee; margin: 40px; padding: 40px; border: solid 2px black;">
  i have margins, padding and a border.
</p>

<p style="background-color: #aee; margin: 40px; padding: 0; border: solid 2px black;">
  i have margins, and a border.
</p>

<p style="background-color: #aee; margin: 0; padding: 40px; border: solid 2px black;">
  i have padding and a border.
</p>
</body>

другие вещи!

  • padding добавляет цвет фона элемента, поля в основном прозрачные

  • некоторые элементы (например, td), похоже, игнорируют поля, в то время как они реагируют на изменения в заполнении

person bobobobo    schedule 14.09.2009
comment
Несколько вещей, которые следует учитывать: - заполнение вносит цвет фона элемента, поля в основном прозрачны - некоторые элементы (например, td), похоже, игнорируют поля, в то время как они реагируют на изменения в заполнении - person bobobobo; 14.09.2009