<p dir="auto">Currently we can create a layout by setting the width (col-<em>-</em>) of the elements.<br>
We can also create spaces between them by leaving cols blanks.</p>
<p dir="auto">It would be great if we can create vertical spaces between elements with the same logic.<br>
In a tiny project I made, you can see an exemple of a possible implementation :<br>
<a href="https://github.com/GuillaumeAmat/bootstrap-more/blob/master/bootstrap-more.css#L35">https://github.com/GuillaumeAmat/bootstrap-more/blob/master/bootstrap-more.css#L35</a></p>
<p dir="auto">Bootstrap CSS adds <code class="notranslate">margin-bottom</code> to some components and <code class="notranslate">margin-top</code> to others. Then if, for example, you start a new row with a <code class="notranslate">h1</code> (which has <code class="notranslate">margin-top</code>) it will be "natively" pushed away from the previous component creating a good sense of component separation right out-of-the-box. In contrast if you start the row with something like a <code class="notranslate">div.carousel</code> (which has NO <code class="notranslate">margin-top</code>) it'll stick to the previous component without any spacing in between, breaking the rhythm reached so far.</p>
<p dir="auto">Also double margins create collapsing margins very often. Thus we have to create unnecessary "spacer" divs and custom CSS classes either to add margins or to keep collapsing margins under control.</p>
<p dir="auto"><a href="https://twitter.com/csswizardry/status/190090844181774336" rel="nofollow">Harry Roberts</a> has made a great work explaining why this is important: <a href="http://csswizardry.com/2012/06/single-direction-margin-declarations/" rel="nofollow">http://csswizardry.com/2012/06/single-direction-margin-declarations/</a>.</p>
<p dir="auto">Now can vertical rhythm be re-considered to eliminate <code class="notranslate">margin-top</code> in favor of <code class="notranslate">margin-bottom</code> only?</p>