Где вы помещаете свои поля CSS?

Если вы хотите добавить пробелы между элементами HTML (используя CSS), к какому элементу вы присоедините его?

Я регулярно в таких ситуациях:

<body>
  <h1>This is the heading</h1>
  <p>This is a paragraph</p>
  <h1>Here another heading</h1>
  <div>This is a footer</div>
</body>

Теперь, скажем, мне нужно 1 место между каждым из этих элементов, но не выше первого h1 или ниже последнего div. К каким элементам я присоединю его?

Очевидно, нет реальной технической разницы между этим:

h1, p { margin-bottom: 1em; }

... и это...

div { margin-top: 1em; }
p { margin-top: 1em; margin-bottom: 1em }

Мне интересны вторичные факторы:

  • Согласованность
  • Применимость ко всем ситуациям
  • Простота/простота
  • Простота внесения изменений

Например: в этом конкретном сценарии я бы сказал, что первое решение лучше второго, так как оно проще; вы привязываете только крайность к двум элементам в одном определении свойства. Тем не менее, я ищу более универсальное решение. Каждый раз, когда я работаю с CSS, у меня возникает ощущение, что есть хорошее правило для применения... но я не уверен, что это такое. Кто-нибудь имеет хороший аргумент?

Ответы

Ответ 1

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

<body>
  <h1>This is the heading</h1>
  <p>This is a paragraph</p>
  <h1>Here another heading</h1>
  <div class="last">This is a footer</div>
</body>

div { margin-bottom: 1em; }
p { margin-bottom: 1em; }
h1 { margin-bottom: 1em; }
.last {margin-bottom: 0; }

В вашем примере, однако, это, вероятно, не так применимо, поскольку div нижнего колонтитула скорее всего будет иметь собственный класс и конкретный стиль. Тем не менее подход ".last", который я использовал, работает для меня, когда у меня есть несколько одинаковых элементов один за другим (абзацы, а что нет). Конечно, я вишневый выбрал технику из рамки "Элементы" CSS.

Ответ 2

С помощью продвинутых селекторов CSS 2 возможно другое решение, которое не будет полагаться на класс last для представления информации о макете в HTML.

В решении используются смежные селектора. К сожалению, MSIE 6 еще не поддерживает его, поэтому нежелание использовать его понятно.

h1 {
    margin: 0 0 1em;
}

div, p, p + h1, div + h1 {
    margin: 1em 0 0;
}

Таким образом, первый h1 не будет иметь верхнего поля, а любой h1, который сразу же следует за абзацем, или поле имеет верхнее поле.

Ответ 3

Если вам нужно некоторое пространство вокруг элемента, дайте ему поле. Это означает, что в этом случае не просто дайте <h1> нижнему краю, но дайте <p> верхнему краю.

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

h1, p { margin: 1em; }

<h1>...</h1>
<p>...</p>

... приведет к 1-му пространству между заголовком и абзацем.

Ответ 4

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

  • У вас будет один нижний колонтитул на странице.
  • У вас будет один заголовок для каждой записи.
  • У вас будет n абзацев на запись.

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

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

Ответ 5

То, что Джим делает, - это ключ. Поля разрушаются между элементами, они не являются аддитивными. Если вы хотите обеспечить, чтобы было поле 1em выше и ниже абзацев и заголовков, и что над заголовком и над нижним колонтитусом имеется 1-й край, тогда ваш css должен отражать это.

Учитывая эту разметку (я добавил заголовок и поместил идентификаторы в верхний/нижний колонтитул):

<body>
  <div id="header"></div>
  <h1>This is the heading</h1>
  <p>This is a paragraph</p>
  <h1>Here another heading</h1>
  <div id="footer">This is a footer</div>
</body>

Вы должны использовать этот css:

#header {
  margin-bottom: 1em;
}

#footer {
  margin-top: 1em;
}

h1, p {
  margin: 1em 0;
}

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

Ответ 6

Я относительный новичок, но мое собственное решение для того, что, как я думаю, мы с вами придумали (изменение полей для одного тега может разобраться в расстоянии в одной части сайта, только чтобы нарушить ранее хороший интервал в другом месте?) теперь выделяет равную маржу сверху и снизу для всех тегов. Вам может потребоваться больше места выше и ниже H1, чем для H3 или ap, но в целом я думаю, что страницы выглядят хорошо с равными пробелами выше и ниже любого текста, поэтому это решение работает хорошо для меня и соответствует вашим "простым" эмпирическое правило тоже, надеюсь!

Ответ 7

Вот как это должно быть сделано:

body > * {
    margin-bottom: 1em;
}
body > *:last-child {
    margin-bottom: 0;
}

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

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

Ответ 8

Я с тобой согласен, что первый вариант лучше. Это вообще то, что я люблю делать. Тем не менее, есть аргумент, который следует указать, чтобы указать маркер для каждого из этих элементов и обнулить его, если вы не хотите его применять, поскольку браузеры обрабатывают поля по-разному. <p> (и, как мне кажется, тег <h1 > ), как правило, имеют значения по умолчанию, заданные браузером, если они не указаны.

Ответ 9

Я только что использовал первого ребенка и последнего ребенка. Так, например, в простом CSS:

h1{
    margin-top:10px;
    margin-bottom:10px;
}
h1:first-child{
    margin-top:0px;
}
p{
    margin:10px;
}
p:first-child{
    margin-top:0px;
}
p:last-child{
    margin-bottom:0px;
}

Это основной пример, но вы можете применить его к большему количеству элементов, и структура лучше, если использовать SASS, LESS и т.д.:)