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

Ответ 1

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

Ответ 2

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

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

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

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

Ответ 5

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

<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="[email protected](i == Model.ActiveTopics.Count - 1 ? " last" : "")">
                ...                                 
          </div>
      }
   }
</div>

Ответ 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.