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

87

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

html css Aprendiz solitario
fuente

Respuestas:

139

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 .

Vucko
fuente

3

@hoosierEE eso no tiene sentido. El espacio entre elementos está bien, es porque los elementos de bloque en línea se posicionarán en la línea de texto. Si pones un espacio en una línea, habrá un espacio. Entonces, el comportamiento es el correcto, incluso si cree que eso es un problema (como Vucko lo llama mal).

Marcos Pérez Gude

2

Estoy de acuerdo con @ MarcosPérezGude, este comportamiento es correcto. Como puede ver en mi publicación, hay algunas formas de eliminar ese espacio en blanco (yo mismo uso comentarios HTML para eliminar el espacio en blanco). Pero si usted importa de que el espacio en blanco, siempre se puede utilizar flexbox, table/table-row/table-cello el uso float.

Vucko

2

Utilizo bloques en línea perfectamente. Mi enfoque normal es parent { font-size:0; } child {font-size: 1rem; }. Con rems ahora es más fácil

Marcos Pérez Gude

es un poco molesto que las pestañas se sigan analizando como espacios. Nunca antes había visto que soltar la corrección de la etiqueta de cierre, ¿tiene eso alguna inestabilidad o efectos secundarios?

MintWelsh

También asegúrese de que borderesté apagado. Esto puede agregar espacio si está flotando los divs.

evolross

22

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

Matriz
fuente

7

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>

Dan
fuente

4

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>

Michiel van Oosterhout
fuente

4

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.

vittore
fuente

2

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

Vaneet Thakur
fuente

2

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

nbixler
fuente

1

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;

Vish
fuente

0

agregar flotador: izquierda; a ambas etiquetas div.

div {
  float: left;
}

Expandir fragmento

Tatenda
fuente