Haga que dos elementos CSS llenen su contenedor, uno al lado del otro, con margen

Quiero que dos elementos ocupen un porcentaje exacto del ancho de los padres, pero también necesito márgenes para mantenerlos separados. Tengo el siguiente marcado:

HELLO
WORLD
 .wrap { background:red; white-space:nowrap; width:300px; } .element { background:#009; color:#cef; text-align:center; display:inline-block; width:50%; margin:4px; } 

Como puede ver en http://jsfiddle.net/NTE2Q/, el resultado es que los niños desbordan el contenedor:

¿Cómo puedo hacer que encajen dentro del espacio? Tristemente, no hay box-sizing:margin-box de box-sizing:margin-box para este caso.

Técnica n.º 1: calc() CSS3 moderno calc()

Usando la longitud de calc() CSS3 , puede hacer esto estableciendo el ancho del .element a:

 .element { width: 49%; /* poor approximation for old browsers */ width: calc(50% - 8px); /* standards-based answer for IE9+, FF16+ */ width: -moz-calc(50% - 8px); /* support for FF4 - FF15 */ width: -webkit-calc(50% - 8px); /* support for Chrome19+ and Safari6+ */ } 

Demostración: http://jsfiddle.net/NTE2Q/1/

Hello y World tienen márgenes de 4px a su alrededor

Consulte http://caniuse.com/calc para obtener detalles sobre qué navegadores y versiones son compatibles.


Técnica n. ° 2: envoltura de la vieja escuela

Los cálculos se pueden hacer acumulando múltiples elementos. Para este caso, envolvemos cada ‘elemento’ en un envoltorio que tiene un ancho del 50% pero con un relleno de 4px:

 
HELLO
WORLD
 .ele1 { display:inline-block; width:50%; padding:4px; box-sizing:border-box; /* Make sure that 50% includes the padding */ -moz-box-sizing:border-box; /* For Firefox */ -webkit-box-sizing:border-box; /* For old mobile Safari */ } .element { background:#009; color:#cef; text-align:center; display:block; } 

Demostración: http://jsfiddle.net/NTE2Q/2/

1. Hello y World tienen márgenes de 4px a su alrededor


Técnica n. ° 3: uso de tablas (CSS)

El mismo resultado se puede obtener tratando la envoltura como una “tabla” y cada elemento como una celda dentro de la misma fila. Con esto, el espacio en blanco entre los elementos no es importante:

 
HELLO
WORLD
 .wrap { background:red; width:300px; display:table; border-spacing:4px } .element { background:#009; color:#cef; text-align:center; width:50%; display:table-cell; }​ 

Demostración: http://jsfiddle.net/NTE2Q/4/

Células azules con 4px consistentemente alrededor de los bordes

Tenga en cuenta que esta última técnica colapsa el espaciado de 4px entre los dos elementos, mientras que las dos primeras técnicas hacen que 8px aparezca entre los dos elementos y 4px en los bordes.

Lo que estás describiendo es básicamente un borde. Entonces, ¿por qué no usar la propiedad de borde CSS con background-clip? Simplemente no olvide los prefijos de proveedor apropiados.

http://jsfiddle.net/NTE2Q/8/

 .wrap { background-color: red; white-space:nowrap; width:300px; } .element { background:#009; color:#cef; text-align:center; display:inline-block; width:50%; border:4px solid rgba(0,0,0,0); box-sizing: border-box; background-clip: padding-box; } 

Ninguna de las técnicas anteriores funcionó consistentemente suficiente navegador cruzado para mí. Encontré una técnica ligeramente diferente con la display:table-cell me permitió colocar 2 o más elementos uno al lado del otro. Aquí hay un ejemplo de esto en acción .

El CSS:

  display:table-cell; background:#009; color:#cef; text-align:center; width:22%; /*Set percentage based on # of elements*/ border:4px solid rgb(255,0,0);/*no longer need background to be red, just make border red*/ 

Ya no necesita el contenedor ya que el div ahora se trata como un

.

Aunque recomiendo encarecidamente usar la técnica de calcificación de Phorgz siempre que sea posible, también quiero proponer una forma de hacer esto de la vieja escuela que use solo una envoltura y position: relative para lograr el efecto.

.two-blocks-by-side () LESS Mixin:

 .two-blocks-by-side(@padding) { padding: @padding (@padding + @padding / 2); font-size: 0; & > div { position: relative; display: inline-block; font-size: initial; width: 50%; &:first-child { left: -1 * @padding / 2 }; &:last-child { right: -1 * @padding / 2 }; } } 

Ejemplo de JS Bin