Removing the inline-block margin that appears from empty divs

Question

I have three empty divs and one div with content. The empty divs for some reason contain a margin that I can't adjust using margin: 0;.

How come I get the top and bottom margin of the empty divs displayed in the pictures?

.widget-user-p{
    text-align: center;
    vertical-align: top;
    width: 100%;
    max-width: 255px;
    min-height: 320px;
    margin: 10px;
    display: inline-block;
    overflow: hidden;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #F4F4F4;
    border-bottom: 3px solid #CACACA;
    transition-duration: 0.3s;
}
.widget-user-empty{
    min-height: 1px;
    border: none;
    margin: 0;
    background-color: #aeaeae;
}

<div class="widget-user-p"></div>
<div class="widget-user-p widget-user-empty"></div>
<div class="widget-user-p widget-user-empty"></div>
<div class="widget-user-p widget-user-empty"></div>

And this is the page output (notice the three lines has a margin between them):

you have added min-height as 1px so it is taking height make it 0 it may not take additional space — Iqbal Pasha, Mar 29 '16 at 12:25
Basically, divs are by default `display: block` and not `inline` or `inline-block`. Why do you set them to `inline-block`? If you want them to sit one next to each other, use `float`. Block elements don't have spaces between them. — Narxx, Mar 29 '16 at 12:25
@Narxx I dont always want them to be next to each other. I want them to automatically adjust depending on the space surrounding them. I dont want them to be either beneath each other or next to each other. I want the empty divs to have 0 margin, so that they dont make the parent div bigger than necessary. — Gjert, Mar 29 '16 at 12:27

score 1 · Accepted Answer · answered Mar 29 '16 at 12:20

1

check the given below code snippet. you have to remove space between div's.

*{margin:0;padding:0;}
div{display:inline-block}

<div></div><!--
--><div></div><!--
--><div>dasdas</div>

answered Mar 29 '16 at 12:20

Ajay Malhotra

798
4
16

There can't be space between them. Its being output like this `$count = 0; while($count < 3){ $user_output .= '
'; $count ++; }` – Gjert Mar 29 '16 at 12:23
@GjertIngarGjersund actual the space is inline element space. It's not a margin. so when you are setting div's inline-block space will come by default. so you have to delete by your self or by commenting. – Ajay Malhotra Mar 29 '16 at 12:56
can you show me the full code @GjertIngarGjersund – Ajay Malhotra Mar 29 '16 at 13:32

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

Found the solution myself.

Removing the "invisible" margin of inline-block divs can be done using font-size: 0; on the parent element.

As seen here

edited May 23 '17 at 11:59

Community

1
1

answered Mar 29 '16 at 12:36

Gjert

1,069
1
18
48

Removing the inline-block margin that appears from empty divs

2 Answers2