Margin после row Bootstrap

737

26 ноября 2016, 18:52

Ребят, не получается сделать margin-top для .row класса, т.е. margin для второго .row идет не от предыдущего .row, а от самого верха страницы.

Структура:

<div id="content">
    <div class="row">
        <div class="col-md-12 text-center">
            ...
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center">
            ...
        </div>
    </div>
</div>

Answer 1

Предположу, что не "от самого верха страницы" а от предыдущего блока.

Эффект схлопывания.

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

Пример:

.row { 
  border: 1px solid #000; 
  margin-top: 20px; 
  margin-bottom: 30px; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" /> 
 
<div class="container"> 
  <div id="content"> 
    <div class="row"> 
        <div class="col-md-12 text-center"> 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, assumenda? 
        </div> 
    </div> 
    <div class="row"> 
        <div class="col-md-12 text-center"> 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis deserunt temporibus aspernatur. 
        </div> 
    </div> 
  </div> 
</div>

Решение: Применять один margin (margin-top; или margin-bottom;) . Или заменить на padding.

Answer 2

Скорее всего, вы имеете дело со "схлопыванием отступов". Почитайте эту статью, в ней указано, из-за чего возникает и как справить.

https://habrahabr.ru/post/257327/