How to Add Vertical Spacing Between Block Elements, But Not Top and Bottom

How to add vertical spacing between block elements, but not top and bottom

Use adjacent selectors

p + p { margin-top: 10px; }

Basically the concept is that, if a p comes after another p give 10px margin in between.

You usage is something similar to

p + p, li + li, div + div { 
    margin-top: 10px;
}

Vertical space between two inline-block and a block element

The other answers provide solutions, but not the why this happens:

Some given funny joke
-----^---------^-^

In that string I've marked three characters. Those three have so called 'decenders' (e.g.: the loop under the G, the legs under the Y and J).

When you declare something inline-block, it gets the properties of both block and inline elements. The inline elements are often text (e.g. a or span), thus have decenders, thus your div has room for decenders.

This is why setting line-height:0; font-size:0; does the trick.

Keeping a bit of vertical space between elements when they wrap?

What happens here is the buttons are displayed as an inline block and by default such elements have no white space or margin to begin with. You can use below method to avoid this.

What I have done is added a class to the parent element of the buttons and inherit style to class "btn".

html

<div class='container'>
    <div class='row'>
        <div class='col-xs-12 button-wrapper'>
            <button class='btn btn-primary'>Lorem ipsum dolor sit amet</button>
            <button class='btn btn-info'>consectetur adipiscing elit</button>
            <button class='btn btn-success'>sed do eiusmod tempor incididunt</button>
        </div>
    </div>
</div>

css

.button-wrapper .btn {
    margin-bottom:5px;
}

Demo

HTML CSS Vertical spacing between a elements of same DIV

<a> elements display inline. Nix all the <br> in the markup and add display: block to the css.

.rightpic1 a, .rightpic2 a {
    display: block;
    margin-top: 15px
}

Controlling vertical space between block-level elements

Try with this selector then :

.headline + p {
   /*Styles to remove*/
   margin-top:0;
}

With this you select any p that is right after a headline

Achieving vertical spacing between element with display table-row?

Maybe you need something like this:

.row > * {
    border-bottom: 5px solid #ffffff;
}

This will add 5px space after your rows.

How to add vertical spacing between Bootstrap Cards

Add Class mb-3 for <div class="col-sm-6 mb-3">

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/><div class="container">  <div class="row">    <div class="col-sm-6 mb-3">      <div class="card">        <div class="card-body">          <h5 class="card-title">CARD 1</h5>          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>          <a href="#" class="btn btn-primary">Go somewhere</a>        </div>      </div>    </div>    <div class="col-sm-6 mb-3">      <div class="card">        <div class="card-body">          <h5 class="card-title">CARD 2</h5>          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>          <a href="#" class="btn btn-primary">Go somewhere</a>        </div>      </div>    </div>
    <div class="col-sm-6 mb-3">      <div class="card">        <div class="card-body">          <h5 class="card-title">CARD 3</h5>          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>          <a href="#" class="btn btn-primary">Go somewhere</a>        </div>      </div>    </div>    <div class="col-sm-6 mb-3">      <div class="card">        <div class="card-body">          <h5 class="card-title">CARD 4</h5>          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>          <a href="#" class="btn btn-primary">Go somewhere</a>        </div>      </div>    </div>
  </div></div>

Why do bottom padding and bottom margins not help to add vertical spacing between these links?

Vertical margin and padding only works on block level elements like div and p. a is an inline element so it wont work.

In order to do what you want you need to add the following style to your links:

display:block;

only then will margin and paging for top and bottom get applied correctly

EDIT: if you do it this way you can also get rid of the <br/> tags

---

Related Topics