Why "Inline-block" doesn't work properly in this CSS?

Question

Please check the CSS below.

 /*rex is the container of ex,ex2,ex3*/
div.rex{
height:200px;
border:0px;
margin:60px auto;
padding: 0;
vertical-align:top;
}

div.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}

div.ex2{
width:0.5%;
height:200px;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}


div.ex3{
width:65.5%;
height:200px;
background-color:#7e8547;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}

The result in browser: enter image description here

What I need:

enter image description here

@DA thank you for edit. I am a Noob :) I will definitely use fiddle in my next posts. Thank you again. — JUST16, Mar 14 '14 at 07:08
possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Oriol, Mar 31 '15 at 19:39

score 38 · Accepted Answer · edited May 23 '17 at 12:34

38

This is actually expected behavior in HTML. Because you are using inline-block, any newline character or whitespace you have after the element and before another inline element, will be counted as a space. If you want the blocks to stack side by side like in your picture, your HTML would need to be like this.

<div class="rex">
    <div class="ex"></div><div class="ex2"></div><div class="ex3"></div>
</div>

working demo

It's not very pretty, but then again, I would recommend using another approach, possibly floating the elements instead.

Refer to here for a more in depth explanation of why this occurs.

How to remove the space between inline-block elements?

edited May 23 '17 at 12:34

Community

1
1

answered Mar 14 '14 at 06:17

Tristan

2,349
16
11

1

The width he has set is correct, they add up to 100%. Try using his CSS with my HTML and you will see that it works. – Tristan Mar 14 '14 at 06:26
This is the correct answer. FYI for the OP, if you don't want to format the markup this way, you may want to consider floating the DIVs (as block level elements) rather than setting them as inline-block. – DA. Mar 14 '14 at 06:28
Floating the divs will work well, however be careful if you do not set a height. You might need to clear the floated content before adding anything under it! – Tristan Mar 14 '14 at 06:30
@Tristan. Thank you very much Tristan:) now it work:) I do apologize DA. you asked me to fiddle it but I am not member of it. Thank you. – JUST16 Mar 14 '14 at 06:41
1

I am familiar with HTML for almost 20 years, but I have never thought that newline character between two tags can influence on the layout. Amazing. – Andremoniy Jun 12 '17 at 14:58
Use `.rex {white-space: nowrap;}` – fernandoandrade Feb 05 '19 at 01:10
You can also comment the space between the inline elements like so: http://jsfiddle.net/a3zst4em/ – Mihai Matei Jun 30 '21 at 11:14

score 4 · Answer 2 · edited May 23 '17 at 12:34

Just extending answer giving by @Tristan here.

You have repeated the css code unnecessarily. You can minify it by using multiple css like :

.ex, .ex2, .ex3 {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    height: 100%;  /* no need of height: 200px; here */
}                  /* if you need to extend it to parent height */
                   /* then use height: 100% */

OR

div.rex > div { /* code here */ }

You can keep elements side by side by using any of the below approaches:

Using display: table-cell
Using float: left
Using display: inline-block (check @Tristan's solution)

Fr0zenFyr · Answer 3 · 2014-03-14T06:39:52.530

1

Add float:left; to your div.ex, div.ex2 and div.ex3 instead.

JSFIDDLE

UPDATE: Add position:absolute to second and third div if float is not a choice.

FIDDLE

UPDATE 2: Add this to only 3rd div if you need that space in between.

FIDDLE

edited Mar 14 '14 at 06:39

answered Mar 14 '14 at 06:25

Fr0zenFyr

1,899
2
28
48

1

Should be no need to use floats if using inline-block – DA. Mar 14 '14 at 06:26
you are doing the overkill with css mate, `position` is kind of *last resort* !! :) – NoobEditor Mar 14 '14 at 06:31
1

inline-block is typically an ALTERNATIVE to floating and absolute positioning. If you're using them in combination, there may be something wrong with the logic. – DA. Mar 14 '14 at 06:36

score 1 · Answer 4 · answered Dec 08 '17 at 11:22

1

You can sue comments like that (this looks little better in code):

<div class="rex">
    <div class="ex"><!--
 --></div><div class="ex2"></div><!--
 --><div class="ex3"></div>
</div>

answered Dec 08 '17 at 11:22

Bartek Qoster

17
3

score 0 · Answer 5 · answered Mar 31 '15 at 19:31

My trick is to set font-size:0; in the parent element, because it's the font-size that is causing the math to not add up perfectly ( about a 4px overlap per div, depending on screen size ) and causes one div to appear under the other.

.rex{
display:block;
font-size:0;
}

.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
vertical-align:top;
margin: 0 .5% 0 0; /*small space between divs*/
padding: 0;
font-size:16px; /*restore font size*/
}

.ex2{
width:65.5%;
height:200px;
background-color:#7e8547;
display:inline-block;
vertical-align:top;
margin: 0;
padding: 0;
font-size:16px;
}

Why "Inline-block" doesn't work properly in this CSS?

5 Answers5

Linked