0

I've got two images that I want to sit beside each other inside the parent div but I can't get them to do it.

.column {width:100%;max-width:1500px; margin:0 auto; }

.span_1_of_2 {width:50%; display:inline-block; }

.span_2_of_2 {width:50%;display:inline-block; }

https://jsfiddle.net/87xzwj5t/

user2252219
  • 835
  • 3
  • 17
  • 41
  • http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements?lq=1 –  Jul 29 '15 at 16:46

4 Answers4

1

It's white-space that's doing you in.

Add this CSS:

.column { font-size: 0; }
.column > div { font-size: 1rem; /* Or whatever you want it to be */ }

and it'll fix your problem.

The font-size: 0 makes sure the white-space isn't rendered, and then the font-size: 1rem resets the font in the child divs to whatever it was set at document root (this is by default 16px in most browsers).

Inline-block elements display just like elements in text flow, which is why the white-space is respected when they're rendered.

JSFiddle example

Community
  • 1
  • 1
Josh Burgess
  • 9,327
  • 33
  • 46
1

Remove the whitespace in html, i will work

.column {width:100%;max-width:1500px; margin:0 auto; }

.span_1_of_2 {width:50%; display:inline-block; }

.span_2_of_2 {width:50%;display:inline-block; }
<div class="column">
<div class="span_1_of_2">Div 1</div><div class="span_2_of_2">Div 2</div>
</div>
Felix A J
  • 6,300
  • 2
  • 27
  • 46
0

The problem is that display:inline-block adds about 4pxof margin to the div with it because of the whitespace. If you still want to use it, you could do something like this:

.span_2_of_2 {width:50%; display:inline-block; margin-left:-4px; }

EDIT

What Josh said may be true. Why don't you just float them? Like this:

    .span_1_of_2 {width:50%;float:left; }
    .span_2_of_2 {width:50%;float:left; }

Then of course clear the float.

Eric Cicero
  • 94
  • 5
0

Just add float:left; to the first span

CSS

.span_1_of_2 {
    width:50%;
    display:inline-block;
    float:left;
}

Here's the deal: a series of inline-block elements formatted like you normally format HTML will have spaces in between them. That´s why with two span and the gap between them you will have more than 100%.

DEMO HERE

Luís P. A.
  • 9,524
  • 2
  • 23
  • 36
  • 1
    You shouldn't use display:inline-block and float on the same div – Eric Cicero Jul 29 '15 at 16:51
  • @EricCicero ... what are you saying is a complete mistake... Why we can not use inline-block and float in the same div? – Luís P. A. Jul 29 '15 at 16:54
  • Don't be angry man. Just read any article that compares the two. They never use them in tandem. For example: http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell – Eric Cicero Jul 29 '15 at 16:55
  • Another example: http://www.vanseodesign.com/css/inline-blocks/ . Since they do the same thing essentially, why would you use both at the same time? That's not best practices. – Eric Cicero Jul 29 '15 at 16:56
  • Yeah..i know this articles...but by W3C there is no mistakes.. you can use both and they are valid – Luís P. A. Jul 29 '15 at 16:58
  • Ok but why do it the less efficient way that involves more markup? – Eric Cicero Jul 29 '15 at 16:59
  • But you don't need it!! I'm sorry man let's agree to disagree – Eric Cicero Jul 29 '15 at 17:02
  • @LuisP.A., have a look on https://drafts.csswg.org/css2/visuren.html#dis-pos-flo: floats, absolutely positionned and fixed elements are almost always `block`s. `display` property generally doesn't influence them. –  Jul 29 '15 at 17:02