Css margin-top vs margin-bottom

Question

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

Какой из них вы предпочитаете, крайний край или крайнее дно или оба? Зачем?

Answer 1

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

Answer 2

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

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

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

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

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

Answer 3

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

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

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

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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