Two inline-block elements, each 50% wide, do not fit side by side in a single row

<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
}
#right {
width: 50%;
background: orange;
display: inline-block;
}
</style>
</head>
<body>
<div id="left">Left</div>
<div id="right">Right</div>
</body>
</html>

JSFiddle: http://jsfiddle.net/5EcPK/

The above code is trying to place the #left div and the #right div, side by side, in a single row. But as you can see in the above JSFiddle URL, this is not the case.

I am able to resolve the issue reducing the width of one of the divs to 49%. See http://jsfiddle.net/mUKSC/ . But this is not an ideal solution because a small gap appears between the two divs.

Another way I am able to solve the problem is by floating both the divs. See http://jsfiddle.net/VptQm/ . This works fine.

But my original question remains. Why when both the divs are kept as inline-block elements, they do not fit side by side?

66934 次浏览
小开

Either make them block instead of inline-block. This will render divs ignoring spaces between them.

display:block;

or remove space between tags 

<div id='left'></div><div id='right'></div>

or add

margin: -1en;

to one of the divs in order to mitigate space taken by single space rendered.

小开
最佳答案

Update: as it's 2021, use flexbox or even better - CSS grid layout instead of inline-block.

When using inline-block elements, there will always be an whitespace issue between those elements (that space is about ~ 4px wide).

So, your two divs, which both have 50% width, plus that whitespace(~ 4px) is more than 100% in width, and so it breaks. Example of your problem:

body{
margin: 0; /* removing the default body margin */
}


div{
display: inline-block;
width: 50%;
}


.left{
background-color: aqua;
}


.right{
background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>

There is a few ways to fix that:

1. No space between those elements

body{
margin: 0; /* removing the default body margin */
}


div{
display: inline-block;
width: 50%;
}


.left{
background-color: aqua;
}


.right{
background-color: gold;
}
<div class="left">foo</div><div class="right">bar</div>

2. Using HTML comments

body{
margin: 0; /* removing the default body margin */
}


div{
display: inline-block;
width: 50%;
}


.left{
background-color: aqua;
}


.right{
background-color: gold;
}
<div class="left">foo</div><!--
--><div class="right">bar</div>

3. Set the parents font-size to 0, and then adding some value to inline-block elements

body{
margin: 0; /* removing the default body margin */
}


.parent{
font-size: 0;  /* parent value */
}


.parent > div{
display: inline-block;
width: 50%;
font-size: 16px; /* some value */
}


.left{
background-color: aqua;
}


.right{
background-color: gold;
}
<div class="parent">
<div class="left">foo</div>
<div class="right">bar</div>
</div>

4. Using a negative margin between them (not preferable)

body{
margin: 0; /* removing the default body margin */
}


div{
display: inline-block;
width: 50%;
margin-right: -4px; /* negative margin */
}


.left{
background-color: aqua;
}


.right{
background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>

5. Dropping closing angle

body{
margin: 0; /* removing the default body margin */
}


div{
display: inline-block;
width: 50%;
}


.left{
background-color: aqua;
}


.right{
background-color: gold;
}
<div class="left">foo</div
><div class="right">bar</div>


<hr>


<div class="left">foo</div><div class="right">
bar</div>

6. Skipping certain HTML closing tags (thanks @thirtydot for the reference)

body{
margin: 0; /* removing the default body margin */
}


ul{
margin: 0; /* removing the default ul margin */
padding: 0; /* removing the default ul padding */
}


li{
display: inline-block;
width: 50%;
}


.left{
background-color: aqua;
}


.right{
background-color: gold;
}
<ul>
<li class="left">foo
<li class="right">bar
</ul>

References:

  1. Fighting the Space Between Inline Block Elements on CSS Tricks
  2. Remove Whitespace Between Inline-Block Elements by David Walsh
  3. How to remove the space between inline-block elements?

As @MarcosPérezGude said, the best way is to use rem, and add some default value to font-size on the html tag (like in HTML5Boilerplate). Example:

html{
font-size: 1em;
}


.ib-parent{             /* ib -> inline-block */
font-size: 0;
}


.ib-child{
display: inline-block;
font-size: 1rem;
}
小开

It's because the whitespace between your two divs is being interpreted as a space. If you put your <div> tags in line as shown below the problem is corrected:

<div id="left"></div><div id="right"></div>
小开

Because there is a space between the elements. If you remove all whitespace, they will fit.

<div id="left">Left</div><div id="right">Right</div>
小开

It can be done by adding the css display:inline to the div that holds the inline elements.

While removing the white space using margin with a negative value it becomes necessary to add it to this particular element. As adding it to a class will affect places where this class has been used.

So it would be safer to use display:inline;

小开

good answer in css3 is:

white-space: nowrap;

in parent node, and :

white-space: normal;
vertical-align: top;

in div (or other) at 50%

exemple : http://jsfiddle.net/YpTMh/19/

EDIT:

there is another way with :

font-size: 0;

for parent node and override it in child node

EDIT 2021 : personaly, I recommand use flexbox now : https://the-echoplex.net/flexyboxes/

小开

add float: left; to both div tags.

div {
float: left;
}

小开

Flexbox example - this would be used for the parent class holding the two side by side elements.

.parentclass {
display: flex;
justify-content: center;
align-items: center;
}

Taken from Vertically centering a div inside another div

小开

Please check below code:

body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
float:left;
}
#right {
width: 50%;
background: orange;
display: inline-block;
float:left;
}
<div id="left">Left</div>
<div id="right">Right</div>


提交答案