Куда вы помещаете свои CSS-поля?[закрыто]

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

  •  01-07-2019
  •  | 
  •  

Вопрос

Когда вы хотите добавить пробел между элементами 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>

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

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

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

... и это...

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

Что меня интересует, так это вторичные факторы:

  1. Последовательность
  2. Применимость ко всем ситуациям
  3. Легкость / Простота
  4. Простота внесения изменений

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

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

Решение

Я обычно использую нижнее поле для элементов, когда хочу, чтобы у них было пространство перед следующим элементом, а затем использую класс ".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".

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

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

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

h1 {
    margin: 0 0 1em;
}

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

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

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

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

h1, p { margin: 1em; }

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

...это привело бы к появлению пробела в 1ем между заголовком и абзацем.

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

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

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

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

Точка зрения, которую высказывает Джим, является ключевой.Поля между элементами сжимаются, они не являются аддитивными.Если вы хотите убедиться, что над и под абзацами и заголовками есть поле в 1 элемент, а также что под верхним и над нижним колонтитулами есть поле в 1 элемент, то ваш 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;
}

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

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

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

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

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

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

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

Я только что использовал first-child и last-child.Так, например, в обычном 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 и т.д. :)

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