inline-block divs acting strange with margin-bottom

StackOverflow https://stackoverflow.com/questions/22910706

  •  29-06-2023
  •  | 
  •  

Question

Im trying to approach this design where i have different divs with display inline block. What im trying to do is keep the same margin bottom for all the divs but it seems like the content height of a div affects the space at the top of every div.

Here's the code and the css:

.box {
    border: 1px solid red;
    display: inline-block;
    background: #eee;
    margin-bottom: 0.5em;
    width: 48%
}

Hello Hello

is simply dummy text of the printing and typesetting industry

Hello Hello

is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type

Hello Hello

is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.

Hello Hello

is simply dummy text of the printing and typesetting industry

Hello Hello

is simply dummy text of the printing and typesetting industry

Here you can see the results: enter link description here

I dont care if the boxes have a different height but the bottom space between them have to be the same. any thoughts ? many thanks !

http://fiddle.jshell.net/qyk6t/2/

Was it helpful?

Solution

One of the ways to solve this issue is using a mutiple column layout. This way you can split your content in more than one column keeping a different height for each one of your boxes.

.column {
    display : inline-block;
    margin: 0.7em;
    vertical-align: top;
    width: 40%;
}

.box {
    border: 1px solid red;
    background: #eee;
    display : inline-block;
    margin: 0.7em;
    vertical-align: top;
    width: 100%;
}

As you can see in the JSFiddle.

There are some cool examples and guides of how use multiple columns:

Hope that helps you.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top