Perché è un div con "display: table-cell;" non influenzato dal margine?

211

Ho divelementi uno accanto all'altro con display: table-cell;.

Voglio impostare margintra loro, ma margin: 5pxnon ha alcun effetto. Perché?

Il mio codice:

<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

310

Causa

Dalla documentazione MDN :

[La proprietà margin] si applica a tutti gli elementi tranne gli elementi con tipi di visualizzazione di tabella diversi da didascalia, tabella e tabella incorporata

In altre parole, la marginproprietà non è applicabile agli display:table-cellelementi.

Soluzione

Valuta invece di utilizzare la border-spacingproprietà.

Nota che dovrebbe essere applicato a un elemento padre con un display:tablelayout e border-collapse:separate.

Per esempio:

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

Guarda la demo di jsFiddle

Margine diverso in orizzontale e in verticale

Come menzionato da Diego Quirós, la border-spacingproprietà accetta anche due valori per impostare un margine diverso per gli assi orizzontale e verticale.

Per esempio

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

— Boaz
fonte

6

Grazie! C'è anche questa notazione nel caso in cui lo spazio orizzontale e verticale debba avere una spaziatura del bordo diversa: orizzontale verticale;

— Diego Quirós,

E pensavo di aver trovato un bug; risulta che ho bisogno di saperne di più CSS.

— Pete Alvin,

Immagino che questo non gestisca davvero specifici margini sinistro / destro / superiore / inferiore? E nessun modo per avere una cella-tabella specifica ha un'imbottitura diversa dalle altre?

— Nathan,

@Nathan paddingpuò essere impostato per qualsiasi selettore necessario (ad es. Classe o ID), come al solito. Se intendi l'intervallo margintra le celle, è possibile impostare separatamente gli assi verticale e orizzontale impostando due valori su border-spacing, ma si applicherà all'intera tabella e non alle singole celle.

— Boaz,

21

Puoi usare div interni per impostare il margine.

<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

Questa è una buona idea se vuoi un margine tra le celle ma non a sinistra oa destra di esse. Quindi il tuo CSS potrebbe essere qualcosa di simile .inner-div { margin-right: 5px; } .outer-cell:last-child .inner-div { margin-right: 0; }. Ma nota anche questo gotcha: gli sfondi rossi e verdi di questo esempio non corrisponderanno necessariamente in altezza poiché non si trovano sulle celle.

— Henrik N,

8

Le celle della tabella non rispettano il margine, ma è possibile utilizzare invece i bordi trasparenti:

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

Nota: non puoi usare le percentuali qui ... :(

— Chris Happy
fonte

2

Se hai div uno accanto all'altro in questo modo

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

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

</div>

Questo dovrebbe funzionare!

— user123_456
fonte

10

Ok, ma cosa succede se vuole due immersioni alla stessa altezza? Float non può farlo.

— hieroshima,

Ed è per questo che JS è fantastico :)

— Chris Happy il

@ChrisHappy Non usare mai JavaScript quando esiste una soluzione CSS. Il tuo codice diventa ingombrante.

— ssc-hrep3,

@ ssc-hrep3 Poiché la reattività viene richiesta, le ingombranti soluzioni CSS non sono più sufficienti ...

— Chris Happy,

2

Sono sufficienti, soprattutto con requisiti di risposta. Dai un'occhiata a flexbox che ora è supportato dalla maggior parte dei principali browser e risolve molto facilmente questo esatto problema. Gli stili di layout non devono mai essere eseguiti da JavaScript.

— ssc-hrep3,