Space between inline-block elements

[ralph]

Hi, please could somebody suggest me a way to remove the extra space that is added below inline-block elements? I know why this space appears (it´s supposed to be the space between text lines) but I wanna remove it!

I tried setting a negative margin-top (of -1em) on the element immediately after the element containing the inline-blocks, and it worked, but I wanna know if there exists a more elegant solution.

BTW is also noted that an extra space is added aside inline-block elements (supposed to be the space between words). I search Google and I noted that both cases are popular problems, but none of the proposed solutions (comments, removing spaces between elements in HTML, etc) worked for me.

Concretely, in this code http://jsfiddle.net/hBBAL/1/, how to remove the extra space that appears before #footer?

[__]

a way to remove the extra space that is added below inline-block elements? […] none of the proposed solutions (comments, removing spaces between elements in HTML, etc) worked for me.

Those suggestions are for space between elements (left and right). For top and bottom, you also need to look at margins and line-height. In your fiddle, you are explicitly adding a 4px bottom margin – that’s where the extra space is coming from.

If you don’t want your elements to have a margin, set it to zero:

margin:0;

how to remove the extra space that appears before #footer?

same answer.

[Paulie_D]

The easiest way to remove space between inline-block element is to set the font-size of the** parent** element to .

You will, however, have to reset the font-size on the inline-block elements otherwise they will inherit the 0 size.

I’m not sure what the ’empty span’ is doing in there, it doesn’t seem to serve any useful purpose.

Tidied up some stuff: http://codepen.io/Paulie-D/pen/CueIs

[__]

I’m not sure what the ‘empty span’ is doing in there, it doesn’t seem to serve any useful purpose.

It forces the line to wrap (so the “useful” elements are justified, instead of left-aligned). I would suggest using a psuedo-element, instead, however:

#container:after{
    content:'';
    display:inline-block;
    height:0;
    margin:0;
    width:100%;
}

demo

[ralph]

Great!; It worked fine!

The “empty span” is to justify #main, #sidebar1 and #sidebar2 inside #container. Without the “span” this elements do not fill a line so they do not justify. It´s just a trick!

Check your code pen – the elements are not justified. But if the span is added (and the corresponding CSS), they get justified! http://codepen.io/anon/pen/LrgFz

Do you know another way to do this (justify inline-block elements)?

Thanks a lot,

[Paulie_D]

Do you know another way to do this (justify inline-block elements)?

Well there’s the way traq suggested but I would just add appropriate left-margins in this instance and just remove it from the main element.

Codepen updated: http://codepen.io/Paulie-D/pen/CueIs

Hmmmm, that did something weird….

[ralph]

Thanks, but please note that the space shown before #footer is greater than the 4px bottom margin. Luckily the solution I was looking for was already posted.

Thanks for your pseudo-element solution.

Thanks a lot to you, guys!

[Author]

Posts