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