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

StackOverflow https://stackoverflow.com/questions/1419519

  •  07-07-2019
  •  | 
  •  

Вопрос

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

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

во-первых, на простом английском:

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

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

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

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

или, если вы предпочитаете, HTML:

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

и, CSS:

вариант а)

div#container {padding: 12px;}

вариант б)

p {margin: 12px;}

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

Джон

Это было полезно?

Решение

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

Другие советы

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

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

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

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

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

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

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

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

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

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

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

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

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

Граница находится РОВНО посередине полей и отступов.Если вы укажете поля, это будет пустое пространство ЗА пределами границы.

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

Не могу показать вам здесь из-за удаления 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 ), похоже, игнорируют поля, в то время как они реагируют на изменения в заполнении

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top