Css margin-top против margin-bottom - PullRequest
Новая
       22

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

32 голосов
/ 12 ноября 2008

Если у вас есть последовательность элементов блока, и вы хотите поместить поле между ними.

Что вы предпочитаете: наценка сверху, наценка снизу или и то и другое? Почему?

Ответы [ 7 ]

32 голосов
/ 12 ноября 2008

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

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

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

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

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

16 голосов
/ 12 ноября 2008

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

11 голосов
/ 15 февраля 2013

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

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

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

2 голосов
/ 05 октября 2018

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

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

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

enter image description here

Используя 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;
}
1 голос
/ 15 ноября 2008

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

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

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

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

0 голосов
/ 27 июня 2016

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

0 голосов
/ 14 февраля 2011

Да, я обычно тоже использую 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 Engine) 

<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>
...