Куда вы помещаете свои поля CSS?
Если вы хотите добавить пробел между элементами HTML (с помощью CSS), к какому элементу вы его прикрепляете?
Я регулярно попадаю в такие ситуации:
<body>
<h1>This is the heading</h1>
<p>This is a paragraph</p>
<h1>Here's another heading</h1>
<div>This is a footer</div>
</body>
Теперь, скажем, мне нужно 1em пространства между каждым из этих элементов, но ни одного выше первого h1 или ниже последнего div. К каким элементам я бы его прикрепил?
Очевидно, между этим нет реальной разницы технический:
h1, p { margin-bottom: 1em; }
...и это...
div { margin-top: 1em; }
p { margin-top: 1em; margin-bottom: 1em }
Меня интересуют второстепенные факторы:
- Последовательность
- Применимость ко всем ситуациям
- Легкость / Простота
- Легкость внесения изменений
Например: в этом конкретном сценарии я бы сказал, что первое решение лучше, чем второе, поскольку оно проще; вы только прикрепляете нижнюю границу к двум элементам в одном определении свойства. Однако я ищу более универсальное решение. Каждый раз, когда я работаю с CSS, у меня возникает ощущение, что есть хорошее практическое правило, которое можно применить ... но я не уверен, что это такое. У кого-нибудь есть веские аргументы?
Ответы 9
Я обычно использую нижнее поле для элементов, когда хочу, чтобы у них было пространство перед следующим элементом, а затем использовать класс «.last» в CSS для удаления поля с последнего элемента.
<body>
<h1>This is the heading</h1>
<p>This is a paragraph</p>
<h1>Here's 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-фреймворка "Elements".
Согласно quirksmode.org/css/contents.html,: last-child поддерживается только в IE9, поэтому, если вы хотите иметь правильные поля в IE7 / IE8, вам все равно нужно использовать классы. :(
Я склонен согласиться с вами, что первый вариант лучше. Обычно это то, чем я люблю заниматься. Однако есть аргумент, что вы должны указать поле для каждого из этих элементов и обнулить его, если вы не хотите его применять, поскольку все браузеры обрабатывают поля по-разному. У тега <p> (и, я думаю, тега <h1> тоже) обычно есть поля по умолчанию, заданные браузером, если они не указаны.
Частично это будет определяться спецификой того, для чего вы разрабатываете, но, скажем, в типичном индексе блога есть своего рода грубая иерархия этих вещей:
- У вас будет один нижний колонтитул на странице.
- У вас будет один заголовок на Вход.
- У вас будет n абзацев в каждой записи.
Установите пробелы для своих абзацев, зная, что они иногда будут появляться в последовательности - вам нужно беспокоиться о том, как они будут выглядеть как ряд. Оттуда настройте заголовки, чтобы иметь дело с границами между записями. Наконец, отрегулируйте расстояние между нижним колонтитулом и телом, чтобы нижняя часть страницы выглядела достойно.
Это эскизный эскиз. Как вы в конечном итоге назначите свои отступы, полностью зависит от вас, но если вы подойдете к этому с точки зрения снизу вверх, вы, вероятно, увидите меньше сюрпризов, когда вы настроите первый для наиболее распространенных / многочисленных элементов, а затем потом для менее распространенных.
Если вам нужно пространство вокруг элемента, дайте ему запас. Это означает, что в данном случае не просто задайте для <h1> нижнее поле, а установите для <p> верхнее поле.
Помните, когда два элемента смежны по вертикали и между ними нет границы или отступов, их поля сжимаются. Это означает, что учитывается только большее из двух полей - они не складываются. Итак, это:
h1, p { margin: 1em; }
<h1>...</h1>
<p>...</p>
... приведет к интервалу 1em между заголовком и абзацем.
То, что делает Джим, является ключевым. Поля между элементами схлопываются, они не складываются. Если вы хотите убедиться, что есть поле 1em над и под абзацами и заголовками и что есть поле 1em под заголовком и над нижним колонтитулом, тогда ваш CSS должен это отразить.
Учитывая эту разметку (я добавил заголовок и разместил идентификаторы в верхнем / нижнем колонтитуле):
<body>
<div id = "header"></div>
<h1>This is the heading</h1>
<p>This is a paragraph</p>
<h1>Here's 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;
}
Теперь порядок ваших элементов не имеет значения. Если вы используете два последовательных заголовка или начинаете страницу с абзаца вместо заголовка, она все равно будет отображаться в том виде, в котором вы сделали отступ.
Используя расширенные селекторы CSS 2, возможно другое решение, которое не полагается на класс last для введения информации о макете в HTML.
В решении используется смежные селекторы. К сожалению, MSIE 6 его пока не поддерживает, поэтому нежелание использовать его можно понять.
h1 {
margin: 0 0 1em;
}
div, p, p + h1, div + h1 {
margin: 1em 0 0;
}
Таким образом, первый h1 не будет иметь верхнего поля, а любой h1, следующий сразу за абзацем, или прямоугольник имеет - верхнее поле.
Я относительно новичок, но мое собственное решение проблемы, с которой, как мне кажется, столкнулись и вы, и я (изменение полей для одного тега может отсортировать интервал в одной части сайта, только чтобы нарушить ранее хороший интервал в другом месте?) теперь выделить равные поля сверху и снизу для всех тегов. Возможно, вам понадобится больше места над и под H1, чем для H3 или ap, но в целом я думаю, что страницы выглядят хорошо с равными пространствами над и под любым заданным фрагментом текста, поэтому это решение хорошо работает для меня и отвечает вашим простым Надеемся, что это также и эмпирическое правило!
Я только что использовал первого и последнего ребенка. Так, например, в простом 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 и т. д. :)
Вот как это нужно делать:
body > * {
margin-bottom: 1em;
}
body > *:last-child {
margin-bottom: 0;
}
Теперь вам не нужно беспокоиться о том, какой элемент является первым, а какой - последним, и вам не нужно всегда размещать специальный класс для вашего последнего элемента.
Единственный раз, когда это не «сработает», - это когда последний дочерний элемент не отображается. В этой ситуации вы можете рассмотреть возможность применения margin-bottom:0; с использованием класса для вашего последнего видимого дочернего элемента.
Если вы не против IE6, вы всегда можете прибегнуть к псевдоселекторам CSS2: first-child и: last-child, чтобы делать ваши ставки!