Mengapa div dengan "display: table-cell;" tidak terpengaruh oleh margin?

211

saya sudah div elemen di samping satu sama lain display: table-cell;.

Saya ingin mengatur margin antara mereka, tetapi margin: 5pxtidak berpengaruh. Mengapa?

Kode saya:

<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

— pengguna1929946
sumber

310

Sebab

Dari dokumentasi MDN :

[Properti margin] berlaku untuk semua elemen kecuali elemen dengan tipe tampilan tabel selain table-caption, table dan inline-table

Dengan kata lain, marginproperti tidak berlaku untuk display:table-cellelemen.

Larutan

Pertimbangkan untuk menggunakan border-spacingproperti sebagai gantinya.

Catatan itu harus diterapkan ke elemen induk dengan display:tabletata letak dan border-collapse:separate.

Sebagai contoh:

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

Lihat demo jsFiddle

Margin yang berbeda secara horizontal dan vertikal

Seperti yang disebutkan oleh Diego Quirós, border-spacingproperti ini juga menerima dua nilai untuk menetapkan margin yang berbeda untuk sumbu horizontal dan vertikal.

Sebagai contoh

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

— Boas
sumber

6

Terima kasih! Ada juga notasi ini dalam hal ruang horisontal dan vertikal harus berbeda jarak-spasi: horisontal vertikal;

— Diego Quirós

Dan saya pikir saya menemukan bug; ternyata saya perlu belajar lebih banyak CSS.

— Pete Alvin

Saya kira ini tidak benar-benar menangani margin kiri / kanan / atas / bawah tertentu? Dan tidak ada cara untuk memiliki sel tabel tertentu yang memiliki bantalan berbeda dari yang lain?

— Nathan

@Nathan paddingdapat diatur untuk setiap pemilih yang diperlukan (misalnya kelas atau id), seperti biasa. Jika Anda maksud marginantara sel, maka itu dapat diatur secara terpisah untuk sumbu vertikal dan horizontal dengan menetapkan dua nilai border-spacing, tetapi itu akan berlaku untuk seluruh tabel dan tidak untuk sel individu.

— Boaz

21

Anda dapat menggunakan div dalam untuk mengatur margin.

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

2

Ini adalah ide yang baik jika Anda ingin margin antara sel tetapi tidak ke kiri atau kanan dari mereka. Maka CSS Anda bisa seperti itu .inner-div { margin-right: 5px; } .outer-cell:last-child .inner-div { margin-right: 0; }. Tetapi perhatikan juga gotcha ini: latar belakang merah dan hijau dari contoh ini tidak akan selalu cocok dengan tinggi karena mereka tidak ada di sel.

— Henrik N

8

Sel tabel tidak menghormati margin, tetapi Anda bisa menggunakan batas transparan sebagai gantinya:

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

Catatan: Anda tidak dapat menggunakan persentase di sini ... :(

— Chris Happy
sumber

2

Jika Anda memiliki div berikutnya satu sama lain seperti ini

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

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

</div>

Ini seharusnya bekerja!

— pengguna123_456
sumber

10

Ok, tapi bagaimana jika dia ingin dua divs sama tinggi? Float tidak bisa melakukan ini.

— hieroshima

Dan itu sebabnya JS luar biasa :)

— Chris Happy

@ChrisHappy Jangan pernah gunakan JavaScript, ketika ada solusi CSS. Kode Anda menjadi besar.

— ssc-hrep3

@ ssc-hrep3 Ketika responsif datang atas permintaan, solusi CSS besar tidak lagi cukup ...

— Chris Happy

2

Mereka cukup - terutama dengan persyaratan responsif. Lihat saja flexbox yang sekarang didukung oleh sebagian besar browser utama dan selesaikan masalah ini dengan sangat mudah. Gaya tata letak tidak boleh dilakukan oleh JavaScript.

— ssc-hrep3