Dos elementos de bloque en línea, cada uno de 50% de ancho, no encajan uno al lado del otro en una sola fila

Question 1

<!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/

El código anterior intenta colocar el div #left y el div #right, uno al lado del otro, en una sola fila. Pero como puede ver en la URL JSFiddle anterior, este no es el caso.

Puedo resolver el problema reduciendo el ancho de uno de los divs al 49%. Consulte http://jsfiddle.net/mUKSC/ . Pero esta no es una solución ideal porque aparece un pequeño espacio entre los dos divs.

Otra forma en que puedo resolver el problema es flotando ambos divs. Consulte http://jsfiddle.net/VptQm/ . Esto funciona bien.

Pero mi pregunta original permanece. ¿Por qué cuando ambos divs se mantienen como elementos de bloque en línea, no encajan uno al lado del otro?

Question 2

Al usar inline-blockelementos, siempre habrá un whitespace problema entre esos elementos (ese espacio tiene aproximadamente ~ 4px de ancho).

Entonces, sus dos divs, que tienen 50% de ancho, más que whitespace(~ 4px) tiene más del 100% de ancho, por lo que se rompe. Ejemplo de su problema:

Mostrar fragmento de código

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>

Expandir fragmento

Hay algunas formas de solucionarlo:

1. No hay espacio entre esos elementos

Mostrar fragmento de código

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>

Expandir fragmento

2. Usar comentarios HTML

Mostrar fragmento de código

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>

Expandir fragmento

3. Establecer los padres font-sizea 0, y luego añadir un poco de valor a inline-blocklos elementos

Mostrar fragmento de código

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>

Expandir fragmento

4. Usar un margen negativo entre ellos ( no es preferible )

Mostrar fragmento de código

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>

Expandir fragmento

5. Ángulo de caída de cierre

Mostrar fragmento de código

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>

Expandir fragmento

6. Omitir ciertas etiquetas de cierre HTML (gracias @thirtydot por la referencia )

Mostrar fragmento de código

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>

Expandir fragmento

Referencias:

Como dijo @ MarcosPérezGude , la mejor manera es usar y agregar algún valor predeterminado a la etiqueta (como en HTML5Boilerplate ). Ejemplo:remfont-sizehtml

html{
    font-size: 1em;
}

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

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

Actualización : como es casi 2018., use flexbox o incluso mejor: diseño de cuadrícula CSS .

Question 3

buena respuesta en css3 es:

white-space: nowrap;

en el nodo principal y:

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

en div (u otro) al 50%

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

EDITAR:

hay otra forma con:

font-size: 0;

para el nodo principal y anularlo en el nodo secundario

Question 4

Es porque el espacio en blanco entre sus dos divs se interpreta como un espacio. Si coloca sus <div>etiquetas en línea como se muestra a continuación, el problema se corrige :

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

Question 5

Porque hay un espacio entre los elementos. Si elimina todos los espacios en blanco, encajarán .

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

Question 6

O haz que se bloqueen en lugar de bloquear en línea. Esto hará que los divs ignoren los espacios entre ellos.

display:block;

o eliminar el espacio entre las etiquetas

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

o agregar

margin: -1en;

a uno de los divs para mitigar el espacio ocupado por el espacio único renderizado.

Question 7

Por favor verifique el siguiente código:

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>

Expandir fragmento

Question 8

Ejemplo de Flexbox: esto se usaría para la clase principal que contiene los dos elementos uno al lado del otro.

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

Tomado de centrar verticalmente un div dentro de otro div

Question 9

Se puede hacer agregando la pantalla css: inline al div que contiene los elementos en línea.

Si bien se elimina el espacio en blanco utilizando un margen con un valor negativo, es necesario agregarlo a este elemento en particular. Ya que agregarlo a una clase afectará los lugares donde se ha utilizado esta clase.

Por lo tanto, sería más seguro usar display: inline;

Question 10

agregar flotador: izquierda; a ambas etiquetas div.

div {
  float: left;
}

Expandir fragmento