CSS margin-top против margin-bottom

Я всегда использую margin-bottom, что означает, что перед первым элементом нет ненужного места.

Зависит от контекста. Но, как правило, margin-top лучше, потому что вы можете использовать :first-child для его удаления. Вот так:

div.block {
    margin-top: 10px;
}

div.block:first-child {
    margin-top: 0;
}

Таким образом, поля будут только между блоками.

Очевидно, работает только с более современными браузерами.

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

.content p { /* obviously choose a more elegant name */
   margin-bottom: 10px;
}

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

Чтобы ответить на исходный вопрос, это полностью зависит от того, как вы хотите, чтобы элементы складывались. Вам нужно дополнительное пространство вверху или внизу?

Да, я обычно также использую margin-bottom, а затем назначаю последний класс последнему в группе. Предполагая, что вам нужен другой стиль.

.discussion .detailed.topics { margin: 20px 0 }    
.discussion .detailed.topics .topic { margin-bottom: 30px }
.discussion .detailed.topics .topic.last { margin-bottom: 0 }

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

HTML (движок Razor View)

<div class = "detailed topics">   
   @if (Model.ActiveTopics != null && Model.ActiveTopics.Count > 0)
   {
      for (int i = 0; i < Model.ActiveTopics.Count(); i++)
      {
          var topic = Model.ActiveTopics[i];
          <div class = "topic@(i == Model.ActiveTopics.Count - 1 ? " last" : "")">
                ...                                 
          </div>
      }
   }
</div>

Другой вариант - использовать селектор + в сочетании с margin-top:

.article + .article {
    margin-top: 10px;
}

При этом выбирается последний элемент, а это означает, что правило вообще не применяется к первому элементу. Никаких дополнительных классов, псевдоклассов или пространства над или под элементами.

/* CSS rules for legibility. */
section, article {
  outline: 1px solid blue;
}

section {
  background: lightgreen;
  padding: 10px;
}

section + section {
  margin-top: 30px;
}

article {
  background: lightblue;
}

/* Using the + selector. */
#PlusSelectorExample article + article {
  margin-top: 30px;
}

/* Using margin-bottom only. */
#MarginBottomExample article {
  margin-bottom: 30px;
}

/* Using last-child. */
#LastChildExample article {
  /* Other CSS rules for this element. */
  margin-bottom: 30px;
}

#LastChildExample article:last-child {
  margin-bottom: 0;
}

<p>The plus selector only selects an element following another. Combining the plus selector and margin-top means there's no extra space at the top since the selector doesn't apply.</p>
<section id  = "PlusSelectorExample">
  <article>In vel sem sed nulla scelerisque semper. Fusce dictum semper lectus, a cursus turpis fermentum vitae.</article>
  <article>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</article>
  <article>Suspendisse potenti. Duis id lacus augue. Duis ultricies est viverra, dapibus est quis, pretium sapien.</article>
</section>
<p>Using margin-bottom leaves an extra gap at the bottom.</p>
<section id = "MarginBottomExample">
  <article>In vel sem sed nulla scelerisque semper. Fusce dictum semper lectus, a cursus turpis fermentum vitae.</article>
  <article>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</article>
  <article>Suspendisse potenti. Duis id lacus augue. Duis ultricies est viverra, dapibus est quis, pretium sapien.</article>
</section>
<p>Combining margin-bottom with last-child achieves the same as the plus operator.</p>
<section id = "LastChildExample">
  <article>In vel sem sed nulla scelerisque semper. Fusce dictum semper lectus, a cursus turpis fermentum vitae.</article>
  <article>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</article>
  <article>Suspendisse potenti. Duis id lacus augue. Duis ultricies est viverra, dapibus est quis, pretium sapien.</article>
</section>

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

<div class = "title">My Awesome Book</div>
<p>Description of My Awesome Book</p>

В этом случае я бы поместил margin-top в <p>, потому что описание не имело бы особого смысла без заголовка, но описание может быть удалено, если бы я хотел просто упомянуть заголовок.

Другой пример:

<img src = "icon.png">
<div>My Awesome Book</div>

Здесь я бы сделал наоборот. Я бы добавил к иконке margin-bottom. Я считаю икону просто украшением и, опять же, у нее больше шансов убрать.

Это моя философия. Элементы стиля - это способ предотвратить изменения CSS через потенциальные изменения DOM.

отвечать, получивший наибольшее количество голосов, здесь немного устарел в том смысле, что он говорит о том, что преимущество перехода на margin-top состоит в том, что вы можете затем использовать :first-child (но с 2018 года вы можете использовать край-низ в сочетании с :последний ребенок с равной поддержкой).

Однако причина предпочтения margin-top с: first-child (вместо край-низ с :последний ребенок) подробно объясняется в этой статье CSS: верхнее и нижнее поля.

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

Используя структуру margin-top с: first-child, CSS, необходимый для правильного размещения объявления, имеет следующий вид:

article {
    margin-top: 2em;
}

article:first-child {
    margin-top: 0;
}

//space at the top of the Ad
.ad {
    margin-top: 1em;
}

//and to reduce space below the ad
.ad + article {
    margin-top: 1em;
}

Я не совсем понимаю, почему некоторые из вас говорят, что нижняя граница более логична, чем верхняя маржа.

Просто чтобы вы все знали: страница отображается сверху вниз.

Рассмотрим простую задачу

<div class = "box">
   <div class = "item first"></div>
   <div class = "item second"></div>
   <div class = "item third"></div>
</div>

Между элементами внутри коробки должно быть определенное расстояние.

Очень общие решения

.item:nth-child(n+2) {
    margin-top: 16px;
}

или вы могли бы использовать

.item + .item {
    margin-top: 16px;
}

Как видите, нужно только одно правило. Он будет работать только тогда, когда присутствует более 1 элемента, чего вы ожидаете, если, например, по какой-то причине «первый» и «второй» не существуют, вы не хотите иметь дополнительное пространство сверху, потому что пространство сверху обрабатывается заполнением элемента "box".

И если по какой-то причине один или несколько элементов должны иметь другой интервал, чем другие, вы просто сделаете это:

.item + .item {
    margin-top: 16px;
}

.item + .item.second {
    margin-top: 32px;
   // you could use margin-bottom here but there will be needed a different rule for handling if there is no 3rd element
}

.item.second + .item {
    margin-top: 32px;
}

Я обнаружил здесь одну проблему, если вы добавляете в список элемент, не содержащий класса «item», но зачем вам это делать?

Учитывая нижнюю границу, я попытался найти некоторые решения, но я не вижу решения, в котором вам не нужно писать несколько правил.

.item {
    margin-bottom: 16px;
}

.item:last-child {
   margin-bottom: 0px;
}

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

По моему опыту, край-низ всегда похож на иглу в ноге.

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

Конечно, вы решаете делать или нет делать свою жизнь проще.

Лучше иметь одно правило вместо нескольких, согласны?

Меньше кода css = лучшая производительность -> более быстрая загрузка