Warum ist ein div mit "display: table-cell"? nicht von der Marge betroffen?

211

Ich habe divElemente nebeneinander mit display: table-cell;.

Ich möchte marginzwischen ihnen setzen, hat aber margin: 5pxkeine Wirkung. Warum?

Mein Code:

<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
quelle

310

Ursache

Aus der MDN-Dokumentation :

[Die margin-Eigenschaft] gilt für alle Elemente mit Ausnahme von Elementen mit anderen Tabellenanzeigetypen als Tabellenbeschriftung, Tabelle und Inline-Tabelle

Mit anderen Worten, die marginEigenschaft gilt nicht für display:table-cellElemente.

Lösung

Verwenden Sie stattdessen die border-spacingEigenschaft.

Beachten Sie, dass es auf ein übergeordnetes Element mit einem display:tableLayout und angewendet werden sollte border-collapse:separate.

Beispielsweise:

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

Siehe jsFiddle-Demo

Unterschiedlicher Rand horizontal und vertikal

Wie von Diego Quirós erwähnt, border-spacingakzeptiert die Eigenschaft auch zwei Werte, um einen unterschiedlichen Rand für die horizontale und vertikale Achse festzulegen.

Beispielsweise

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

— Boas
quelle

6

Vielen Dank! Es gibt auch diese Notation für den Fall, dass der horizontale und der vertikale Raum unterschiedliche Randabstände aufweisen müssen: horizontal vertikal;

— Diego Quirós

Und ich dachte, ich hätte einen Fehler gefunden; Es stellt sich heraus, dass ich mehr CSS lernen muss.

— Pete Alvin

Ich denke, das geht nicht wirklich mit bestimmten linken / rechten / oberen / unteren Rändern um? Und keine Möglichkeit, eine bestimmte Tabellenzelle anders aufzufüllen als die anderen?

— Nathan

@Nathan paddingkann wie gewohnt für jeden erforderlichen Selektor (z. B. Klasse oder ID) eingestellt werden. Wenn Sie das marginzwischen den Zellen meinen , kann dies für die vertikale und horizontale Achse separat festgelegt werden, indem zwei Werte auf gesetzt border-spacingwerden. Dies gilt jedoch für die gesamte Tabelle und nicht für einzelne Zellen.

— Boaz

21

Sie können innere Divs verwenden, um den Rand festzulegen.

<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
quelle

2

Dies ist eine gute Idee, wenn Sie einen Abstand zwischen den Zellen wünschen, jedoch nicht links oder rechts von ihnen. Dann könnte Ihr CSS so etwas wie sein .inner-div { margin-right: 5px; } .outer-cell:last-child .inner-div { margin-right: 0; }. Beachten Sie aber auch dieses Problem: Die roten und grünen Hintergründe dieses Beispiels stimmen nicht unbedingt in der Höhe überein, da sie sich nicht in den Zellen befinden.

— Henrik N

8

Tabellenzellen berücksichtigen den Rand nicht, aber Sie können stattdessen transparente Ränder verwenden:

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

Hinweis: Hier können keine Prozentsätze verwendet werden ... :(

— Chris Happy
quelle

2

Wenn Sie so nebeneinander div haben

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

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

</div>

Das sollte funktionieren!

— user123_456
quelle

10

Ok, aber was ist, wenn er zwei Divs in gleicher Höhe haben will? Float kann das nicht.

— Hieroshima

Und deshalb ist JS großartig :)

— Chris Happy

@ChrisHappy Verwenden Sie niemals JavaScript, wenn es eine CSS-Lösung gibt. Ihr Code wird nur sperrig.

— ssc-hrep3

@ ssc-hrep3 Da Reaktionsfähigkeit auf Anfrage kommt, sind die sperrigen CSS-Lösungen nicht mehr ausreichend ...

— Chris Happy

2

Sie sind ausreichend - insbesondere bei reaktionsschnellen Anforderungen. Schauen Sie sich einfach die Flexbox an, die jetzt von den meisten gängigen Browsern unterstützt wird und genau dieses Problem sehr einfach löst. Layoutstile sollten niemals mit JavaScript erstellt werden.

— ssc-hrep3