CSS, вложенные div и поля и отступы - PullRequest
Новая
       23

CSS, вложенные div и поля и отступы

4 голосов
/ 14 сентября 2009

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

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

сначала, простым языком:

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

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

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

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

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

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

и, CSS:

вариант а) 

div#container {padding: 12px;}

вариант б) 

p {margin: 12px;}

Ура!

Jon

Ответы [ 7 ]

4 голосов
/ 14 сентября 2009

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

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

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

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

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

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

3 голосов
/ 14 сентября 2009

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

2 голосов
/ 14 сентября 2009

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

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

1 голос
/ 14 сентября 2009

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

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

ура!

0 голосов
/ 14 сентября 2009

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

Граница сидит 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>

другие вещи!

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

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

0 голосов
/ 14 сентября 2009

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

...