Для чего нужен отрицательный margin и положительный padding в bootstrap?

#css #bootstrap #padding #margin #grid_layout

Bootstrap'ом редко пользовался, как-то не вникал в эти положительные и отрицательные
отступы блоков.  

Подскажите, для чего в блоке .container положительный padding, а в блоке .row отрицательный
margin? Какая практическая польза в этих отступах?  
    

Ответы

Ответ 1

Это сделано для выравнивания.  

У каждой колонки слева и справа есть padding, равный 15px. Он нужен для генерации
одинакового отступа между колонками. Однако в этом случае отступ слева у первой и отступ
справа у последней колонки в строке складывается с отступами контейнера.

Чтобы нивелировать его используется .row с отрицательным margin равным 15px. Если
использовать .row, то левый отступ у первого столбца и правый отступ у правого столбца
"проваливаются" в уже существующие отступы у контейнера и не занимают дополнительного
места.  

На вопрос почему бы не убрать отступ у контейнера и отказаться от отрицательного
margin у .row ответ простой: блоков с контейнером может быть несколько, и в одном из
них может отсутствовать сетка.

Чтобы блоки с сеткой и без нее были выравнены по левой и правой границе, как раз
и придумали этот прием с отрицательными margin. А сам padding у контейнера еще нужен
и для того, чтобы его содержимое не прилипало к границе экрана на небольших разрешениях.

update: при многократной вложенности, в качестве контейнера выступает уже колонка,
а принцип действия тот же самый.


Ответ 2

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


  

    

      

    
  



В приведенном примере блок #inner будет по размеру такой же как блок #outer. Если
бы у row не было отрицательных отступов, то блок #inner был бы меньше блока #outer
на 15px с каждой стороны.