Guys, I can’t make a margin-top for a .row class, i.e. margin for the second .row comes not from the previous .row , but from the very top of the page.
Structure:
<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> 
I suppose that not "from the very top of the page" but from the previous block.
The effect of the collapse.
When considering the block model, the topic of indent collapsing was raised. This effect is observed when the block elements located next to each other vertically, the indents are not added together, but are combined with each other. The collapse itself acts on two or more blocks (one can be inserted inside the other) with indents from the top or bottom, while adjacent adjoints are combined into one. This effect only works for blocks that have no fields or borders. For left and right indents, a collapse is never applied.
Example:
.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> Solution: Apply one margin ( margin-top; or margin-bottom; ). Or replace with padding .
Most likely, you are dealing with a "collapse of indents." Read this article, it says, because of what arises and how to fix it.
Source: https://ru.stackoverflow.com/questions/578106/
All Articles