0

Ребят, не получается сделать 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>
1
  • 1
    приведенный код не имеет проблем с отступами. Приведите фрагмент кода, где ошибка продемонстрирована.
    – teran
    14 окт 2016 в 14:05

2 ответа 2

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.

2
  • 1
    Проблема была в версии boostrap 3.3.7. Попробуйте этот код на этой версии.
    – rammtw
    17 окт 2016 в 5:16
  • @rammtw, поменяла на 3.3.7 - одинаково
    – SVE
    17 окт 2016 в 5:41
-1

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

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

1
  • Пожалуйста, постарайтесь публиковать развернутые ответы содержащие конкретный пример минимального решения, дополняя их ссылкой на источник. Ответы–ссылки (как и комментарии) не добавляют знаний в Рунет. 15 окт 2016 в 11:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.