¿Por qué es un div con "display: table-cell;" no afectado por el margen?

211

Tengo divelementos uno al lado del otro con display: table-cell;.

Quiero establecer marginentre ellos, pero margin: 5pxno tiene ningún efecto. ¿Por qué?

Mi código:

<div style="display: table-cell; margin: 5px; background-color: red;">1</div>
<div style="display: table-cell; margin: 5px; background-color: green;">1</div>

html css

— usuario1929946
fuente

310

Porque

De la documentación de MDN :

[La propiedad de margen] se aplica a todos los elementos, excepto los elementos con tipos de visualización de tabla distintos de table-caption, table y inline-table

En otras palabras, la marginpropiedad no es aplicable adisplay:table-cell elementos.

Solución

Considere usar la border-spacingpropiedad en su lugar.

Tenga en cuenta que debe aplicarse a un elemento padre con un display:tablediseño y border-collapse:separate.

Por ejemplo:

HTML

<div class="table">
    <div class="row">
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">879</div>
    </div>
</div>

CSS

.table {display:table;border-collapse:separate;border-spacing:5px;}
.row {display:table-row;}
.cell {display:table-cell;padding:5px;border:1px solid black;}

Ver demostración de jsFiddle

Diferente margen horizontal y verticalmente

Como mencionó Diego Quirós, la border-spacingpropiedad también acepta dos valores para establecer un margen diferente para los ejes horizontal y vertical.

Por ejemplo

.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */

— Booz
fuente

66

¡Gracias! También existe esta notación en caso de que el espacio horizontal y vertical deba tener un espaciado de borde diferente: horizontal vertical;

— Diego Quirós

Y pensé que encontré un error; Resulta que necesito aprender más CSS.

— Pete Alvin

¿Supongo que esto realmente no maneja márgenes específicos izquierda / derecha / superior / inferior? ¿Y no hay forma de que una celda de tabla específica tenga un relleno diferente del resto?

— Nathan

@Nathan paddingse puede configurar para cualquier selector necesario (por ejemplo, clase o id), como de costumbre. Si quiere decir marginentre las celdas, eso se puede establecer por separado para los ejes vertical y horizontal estableciendo dos valores en border-spacing, pero se aplicará a toda la tabla y no a las celdas individuales.

— Boaz

21

Puede usar divs internos para establecer el margen.

<div style="display: table-cell;">
   <div style="margin:5px;background-color: red;">1</div>
</div>
<div style="display: table-cell; ">
  <div style="margin:5px;background-color: green;">1</div>
</div>

JS Fiddle

— urmurmur
fuente

2

Esta es una buena idea si desea margen entre las celdas pero no a la izquierda o derecha de ellas. Entonces tu CSS podría ser algo así .inner-div { margin-right: 5px; } .outer-cell:last-child .inner-div { margin-right: 0; }. Pero también tenga en cuenta este problema: los fondos rojo y verde de este ejemplo no necesariamente coincidirán en altura ya que no están en las celdas.

— Henrik N

8

Las celdas de la tabla no respetan el margen, pero en su lugar puede usar bordes transparentes:

div {
  display: table-cell;
  border: 5px solid transparent;
}

Nota: no puede usar porcentajes aquí ... :(

— Chris feliz
fuente

2

Si tienes div uno al lado del otro como este

<div id="1" style="float:left; margin-right:5px">

</div>
<div id="2" style="float:left">

</div>

¡Esto debería funcionar!

— user123_456
fuente

10

Ok, pero ¿y si quiere dos divs a la misma altura? Flotador no puede hacer esto.

— hieroshima

Y es por eso que JS es increíble :)

— Chris Happy

@ChrisHappy Nunca use JavaScript, cuando hay una solución CSS. Tu código se vuelve voluminoso.

— ssc-hrep3

@ ssc-hrep3 A medida que la capacidad de respuesta llega a demanda, las soluciones CSS voluminosas ya no son suficientes ...

— Chris Happy

2

Son suficientes, especialmente con requisitos receptivos. Solo eche un vistazo a flexbox, que ahora es compatible con la mayoría de los principales navegadores y resuelve este problema exacto muy fácilmente. Los estilos de diseño nunca deben hacerse con JavaScript.

— ssc-hrep3