How to set the space between lines in a div without setting line height

Question

I have a div containing elements with display set to inline-block. These contained elements have various heights. The resulting lines in the div have various heights, accord

Answer 1

What about using the css padding property? For Example:

padding:25px;

You can also specify: padding-right, padding-bottom, etc.

Answer 2

Why not try CSS margin or border settings on your P elements?

Answer 3

Whats about to use columns with inline-block and in each column are more divs.

<div>
  <div style="display: inline-block;">
    <div>variable stuff</div>
    <div>variable stuff</div>
  </div>
  <div style="display: inline-block;">
    <div>variable stuff</div>
    <div>variable stuff</div>
  </div>
</div>

Answer 4

That can only be done using margin style. You don't need to wrap each contained DIVs with another DIV. Just use the STYLE tag.

Here's an example. Border and colorings are added for demo purpose.

<style>
    #container     {width:30ex; outline:1px solid black; padding:0 .2em; background:white;}
    #container>div {display:inline-block; margin:.2em 0; background:#fca;}
</style>
<div id="container">
    <div style="height:1em">variable</div>
    <div style="height:5em">variable stuff variable</div>
    <div style="height:2em">variable stuff</div>
    <div style="height:1em">variable</div>
    <div style="height:3em">variable stuff variable stuff</div>
    <div style="height:1em">variable</div>
    <div style="height:1em">variable</div>
    <div style="height:1em">variable</div>
    <div style="height:1em">variable</div>
</div>