Por que uma div com "display: table-cell;" não é afetado pela margem?

211

Eu tenho divelementos próximos um do outro com display: table-cell;.

Eu quero definir marginentre eles, mas margin: 5pxnão tem efeito. Por quê?

Meu 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 user1929946
fonte

Respostas:

310

Causa

Na documentação do MDN :

[A propriedade margin] se aplica a todos os elementos, exceto os elementos com tipos de exibição de tabela diferentes de legenda, tabela e tabela embutida

Em outras palavras, a marginpropriedade não é aplicável a display:table-cellelementos.

Solução

Considere usar a border-spacingpropriedade.

Observe que ele deve ser aplicado a um elemento pai com um display:tablelayout e border-collapse:separate.

Por exemplo:

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;}

Veja a demonstração do jsFiddle

Margem diferente na horizontal e na vertical

Conforme mencionado por Diego Quirós, a border-spacingpropriedade também aceita dois valores para definir uma margem diferente para os eixos horizontal e vertical.

Por exemplo

.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */
Boaz
fonte
6
Obrigado! Existe também essa notação caso o espaço horizontal e vertical precise ter diferentes espaçamentos de borda: vertical horizontal;
Diego Quirós 16/02
E eu pensei ter encontrado um bug; Acontece que eu preciso aprender mais CSS.
Pete Alvin
Eu acho que isso realmente não lida com margens esquerda / direita / superior / inferior específicas? E não há como ter uma célula de tabela específica com preenchimento diferente do resto?
Nathan
@ Nathan paddingpode ser configurado para qualquer seletor necessário (por exemplo, classe ou ID), como de costume. Se você quer dizer marginentre as células, isso pode ser definido separadamente para os eixos vertical e horizontal, definindo dois valores para border-spacing, mas será aplicado a toda a tabela e não a células individuais.
Boaz
21

Você pode usar divs internos para definir a margem.

<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
fonte
2
Essa é uma boa idéia se você quiser uma margem entre as células, mas não a esquerda ou a direita delas. Então seu CSS pode ser algo como .inner-div { margin-right: 5px; } .outer-cell:last-child .inner-div { margin-right: 0; }. Mas observe também esta dica: os planos de fundo vermelho e verde deste exemplo não necessariamente coincidem em altura, pois não estão nas células.
Henrik N
8

As células da tabela não respeitam a margem, mas você pode usar bordas transparentes:

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

Nota: você não pode usar porcentagens aqui ... :(

Chris Happy
fonte
2

Se você tem div um ao lado do outro assim

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

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

</div>

Isso deve funcionar!

user123_456
fonte
10
Ok, mas e se ele quiser dois mergulhos na mesma altura? O flutuador não pode fazer isso.
hieroshima
E é por isso que o JS é incrível :) #
Chris Happy
@ChrisHappy Nunca use JavaScript, quando houver uma solução CSS. Seu código fica volumoso.
ssc-hrep3
@ ssc-hrep3 Como resposta vem na demanda, as soluções CSS volumosos não são suficientes ...
Chris feliz
2
Eles são suficientes - especialmente com requisitos de resposta. Basta dar uma olhada no flexbox, que agora é suportado pela maioria dos principais navegadores e resolve esse problema exato com muita facilidade. Os estilos de layout nunca devem ser feitos por JavaScript.
ssc-hrep3