Dlaczego div z „display: table-cell;” margines nie ma wpływu?

211

Mam divelementy obok siebie display: table-cell;.

Chcę ustawić marginmiędzy nimi, ale margin: 5pxnie ma to żadnego efektu. Czemu?

Mój kod:

<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

— użytkownik1929946
źródło

310

Przyczyna

Z dokumentacji MDN :

[Właściwość marginesu] dotyczy wszystkich elementów z wyjątkiem elementów o typach wyświetlania tabeli innych niż podpis tabeli, tabela i tabela wbudowana

Innymi słowy, marginwłaściwość nie ma zastosowania do display:table-cellelementów.

Rozwiązanie

border-spacingZamiast tego rozważ użycie właściwości.

Uwaga: należy go zastosować do elementu nadrzędnego z display:tableukładem i border-collapse:separate.

Na przykład:

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

Zobacz demo jsFiddle

Różne marginesy w poziomie i w pionie

Jak wspomniał Diego Quirós, border-spacingwłaściwość przyjmuje również dwie wartości, aby ustawić inny margines dla osi poziomej i pionowej.

Na przykład

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

— Boaz
źródło

6

Dzięki! Istnieje również ten zapis w przypadku, gdy przestrzeń pozioma i pionowa muszą mieć różne odstępy między krawędziami: pozioma pionowa;

— Diego Quirós

I myślałem, że znalazłem błąd; okazuje się, że muszę nauczyć się więcej CSS.

— Pete Alvin,

Myślę, że to tak naprawdę nie obsługuje określonych marginesów lewy / prawy / górny / dolny? I nie ma sposobu, aby konkretna komórka tabeli miała inne wypełnienie od reszty?

— Nathan

@Nathan paddingmożna ustawić dla dowolnego niezbędnego selektora (np. Klasa lub identyfikator), jak zwykle. Jeśli masz na myśli odległość marginmiędzy komórkami, możesz to ustawić osobno dla osi pionowej i poziomej, ustawiając dwie wartości na border-spacing, ale będzie to miało zastosowanie do całej tabeli, a nie do poszczególnych komórek.

— Boaz,

21

Możesz użyć wewnętrznych div, aby ustawić margines.

<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
źródło

2

Jest to dobry pomysł, jeśli chcesz margines między komórkami, ale nie po lewej lub po prawej stronie. Wtedy twój CSS może być podobny .inner-div { margin-right: 5px; } .outer-cell:last-child .inner-div { margin-right: 0; }. Ale zwróć też uwagę na tę gotcha: czerwone i zielone tła w tym przykładzie niekoniecznie muszą odpowiadać wysokości, ponieważ nie znajdują się na komórkach.

— Henrik N

8

Komórki tabeli nie uwzględniają marginesów, ale zamiast tego można użyć przezroczystych ramek:

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

Uwaga: nie możesz tutaj użyć wartości procentowych ... :(

— Chris Happy
źródło

2

Jeśli masz div obok siebie w ten sposób

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

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

</div>

To powinno działać!

— użytkownik123_456
źródło

10

Ok, ale co, jeśli chce dwóch div na równej wysokości? Float nie może tego zrobić.

— hieroshima

I dlatego JS jest niesamowity :)

— Chris Happy

@ChrisHappy Nigdy nie używaj JavaScript, jeśli istnieje rozwiązanie CSS. Twój kod jest po prostu nieporęczny.

— ssc-hrep3

@ ssc-hrep3 Ponieważ czas reakcji pojawia się na żądanie, obszerne rozwiązania CSS nie są już wystarczające ...

— Chris Happy

2

Są wystarczające - szczególnie przy elastycznych wymaganiach. Wystarczy spojrzeć na Flexbox, który jest teraz obsługiwany przez większość głównych przeglądarek i bardzo łatwo rozwiązuje ten dokładnie problem. Style układania nigdy nie powinny być wykonywane przez JavaScript.

— ssc-hrep3