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

Если вы хотите добавить пробел между элементами HTML (используя CSS), к какому элементу вы присоедините его?Где вы помещаете свои поля 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 или ниже последними дел. К каким элементам я должен его прикрепить?

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

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

... и это ...

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

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

Консистенция
Применимость ко всем ситуациям
Удобство/простота
Удобство внесения изменений

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

источник

2008-09-19 Craig Walker

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

В вашем примере, хотя, это, вероятно, не что применимо, как сноска ДИВ бы, скорее всего, это собственный класс и специфический стиль. Все еще «.last» подход, который я использовал для меня, когда у меня есть несколько одинаковых элементов один за другим (абзацы и что-нет). Конечно, я выбрал вишневую технику из рамки CSS «Элементы».

источник

2008-09-19 22:32:55 Pavling

Если вы не против того, чтобы избегать IE6, вы всегда можете отказаться от псевдоселекторов CSS2: first-child и last-child, чтобы делать ставки! – 2009-12-04 18:44:53

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

источник

2008-09-19 22:33:21

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

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

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

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

источник

2008-09-19 22:34:59

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

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

h1, p { margin: 1em; } 

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

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

источник

2008-09-19 23:03:56 Jim

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

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

источник

2008-09-21 05:35:17 Prestaul

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

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

h1 { 
    margin: 0 0 1em; 
} 

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

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

источник

2008-09-21 17:44:15

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

источник

2009-04-25 10:12:24

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

источник

2015-11-27 10:13:35 JDavies

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

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

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

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

источник

2016-01-14 21:05:18

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

ответ

Смежные вопросы