Semua yang Perlu Anda Ketahui Tentang Margin CSS

Salah satu hal pertama yang sebagian besar dari kita pelajari saat mempelajari CSS, adalah detail dari berbagai bagian kotak di CSS, yang digambarkan sebagai Model Kotak CSS. Salah satu elemen dalam Model Kotak adalah margin, area transparan di sekitar kotak, yang akan mendorong elemen lain menjauh dari isi kotak. Properti margin-top , margin-right , margin-bottom dan margin-left dijelaskan kembali di CSS1, bersama dengan margin singkatan untuk mengatur keempat properti sekaligus.

Margin tampaknya menjadi hal yang cukup sederhana, namun, dalam artikel ini, kita akan melihat beberapa hal yang membuat orang tersandung sehubungan dengan penggunaan margin. Secara khusus, kita akan melihat bagaimana margin berinteraksi satu sama lain, dan bagaimana margin collaps benar-benar bekerja.

Model Kotak CSS

Seperti semua artikel tentang bagian dari Model Kotak CSS, kita harus mendefinisikan apa yang kita maksud dengan itu, dan bagaimana model telah diklarifikasi melalui versi CSS. Model Kotak mengacu pada bagaimana berbagai bagian kotak — konten, padding, batas, dan margin — ditata dan berinteraksi satu sama lain. Di CSS1, Model Kotak dirinci dengan diagram seni ASCII yang ditunjukkan pada gambar di bawah.

Empat properti margin untuk setiap sisi kotak dan steno margin semuanya didefinisikan dalam CSS1.

Spesifikasi CSS2.1 memiliki ilustrasi untuk mendemonstrasikan Model Kotak dan juga mendefinisikan istilah yang masih kami gunakan untuk menggambarkan berbagai kotak. Spesifikasi menjelaskan content box padding box border box , dan margin box , masing-masing ditentukan oleh tepi konten, padding, perbatasan, dan margin masing-masing.

Sekarang ada spesifikasi Model Kotak Level 3 sebagai Draf Kerja. Spesifikasi ini merujuk kembali ke CSS2 untuk definisi Model Kotak dan margin, oleh karena itu definisi CSS2 yang akan kita gunakan untuk sebagian besar artikel ini.

Margin Runtuh

Spesifikasi CSS1, seperti yang didefinisikan margin, juga mendefinisikan bahwa margin vertikal runtuh . Perilaku runtuh ini telah menjadi sumber frustrasi terkait margin sejak saat itu. Keruntuhan margin masuk akal jika Anda menganggap bahwa pada hari-hari awal itu, CSS digunakan sebagai bahasa pemformatan pendokumentasian. Margin collapsing berarti bahwa ketika heading dengan margin bawah, diikuti oleh paragraf dengan margin atas, Anda tidak mendapatkan celah besar di antara item-item tersebut.

Ketika margin runtuh, mereka akan bergabung sehingga ruang antara dua elemen menjadi lebih besar dari dua margin. Margin yang lebih kecil pada dasarnya berakhir di dalam yang lebih besar.

Margin runtuh dalam situasi berikut:

• Saudara yang berdekatan
• Kotak yang benar-benar kosong
• Elemen induk dan anak pertama atau terakhir

Mari kita lihat masing-masing skenario ini secara bergantian, sebelum melihat hal-hal yang mencegah margin runtuh dalam skenario ini.

Saudara yang Berdekatan

Deskripsi awal saya tentang penurunan margin adalah demonstrasi bagaimana margin antara saudara kandung yang berdekatan runtuh. Selain dalam situasi yang disebutkan di bawah ini, jika Anda memiliki dua elemen yang ditampilkan satu demi satu dalam aliran normal, margin bawah elemen pertama akan runtuh dengan margin atas elemen berikutnya.

Dalam contoh CodePen di bawah ini, ada tiga elemen div . Yang pertama memiliki margin atas dan bawah 50 piksel. Yang kedua memiliki margin atas dan bawah 20px. Yang ketiga memiliki margin atas dan bawah 3em. Margin antara dua elemen pertama adalah 50 piksel, karena margin atas yang lebih kecil digabungkan dengan margin bawah yang lebih besar. Margin antara dua elemen kedua dalam 3em, karena 3em lebih besar dari 20 piksel di bagian bawah elemen kedua.

Kotak yang Benar-Benar Kosong

Jika sebuah kotak kosong, maka margin atas dan bawahnya bisa runtuh satu sama lain. Dalam contoh CodePen berikut, elemen dengan kelas kosong memiliki margin atas dan bawah 50 piksel, namun, jarak antara item pertama dan ketiga bukan 100 piksel, tetapi 50. Hal ini disebabkan oleh dua margin yang runtuh. Menambahkan apa pun ke kotak itu (bahkan padding) akan menyebabkan margin atas dan bawah digunakan dan tidak runtuh.

Elemen Induk Dan Anak Pertama Atau Terakhir

Ini adalah skenario penurunan margin yang paling sering membuat orang keluar, karena tampaknya tidak terlalu intuitif. Dalam CodePen berikut, saya memiliki div dengan kelas pembungkus, dan saya telah memberikan outline div itu dengan warna merah sehingga Anda dapat melihat di mana letaknya. Ketiga elemen anak semuanya memiliki margin 50 piksel. Namun, item pertama dan terakhir rata dengan tepi bungkusnya; tidak ada margin 50 piksel antara elemen dan pembungkus.

Ini karena margin pada anak runtuh dengan margin apa pun pada orang tua sehingga berakhir di luar orang tua. Anda dapat melihat ini jika Anda memeriksa anak pertama menggunakan DevTools. Area kuning yang disorot adalah margin.

Hanya Margin Blok yang Runtuh

Contoh terakhir juga menyoroti sesuatu tentang margin yang runtuh. Di CSS2, hanya margin vertikal yang ditentukan untuk diciutkan — yaitu margin atas dan bawah pada elemen jika Anda berada dalam mode penulisan horizontal. Jadi margin kiri dan kanan di atas tidak runtuh dan berakhir di luar pembungkus.

Catatan : Perlu diingat bahwa margin hanya runtuh ke arah blok, seperti di antara paragraf.

Hal-hal yang Mencegah Margin Runtuh

Margin tidak pernah runtuh jika item memiliki posisi absolut, atau melayang. Namun, dengan asumsi Anda telah mengalami salah satu tempat di mana margin runtuh yang diuraikan di atas, bagaimana Anda bisa menghentikan margin tersebut runtuh?

Hal pertama yang berhenti runtuh adalah situasi di mana ada sesuatu di antara elemen-elemen yang bersangkutan.

Misalnya, kotak yang benar-benar kosong dari konten tidak akan menciutkan margin atas dan bawahnya jika memiliki batas, atau bantalan yang diterapkan. Pada contoh di bawah ini saya telah menambahkan 1px padding ke kotak. Sekarang ada margin 50 piksel di atas dan di bawah kotak.

Ini memiliki logika di baliknya, jika kotak itu benar-benar kosong tanpa batas atau bantalan, itu pada dasarnya tidak terlihat. Ini mungkin elemen paragraf kosong yang dilemparkan ke markup oleh CMS Anda. Jika CMS Anda menambahkan elemen paragraf yang berlebihan, Anda mungkin tidak ingin mereka menyebabkan kesenjangan besar antara paragraf lain karena margin mereka dihormati. Tambahkan apa pun ke dalam kotak, dan Anda akan mendapatkan celah itu.

Perilaku serupa dapat dilihat dengan margin pada anak pertama atau terakhir yang runtuh melalui orang tua. Jika kita menambahkan batas ke orang tua, margin pada anak-anak tetap berada di dalam.

Sekali lagi, ada beberapa logika untuk perilaku tersebut. Jika Anda memiliki elemen pembungkus untuk tujuan semantik yang tidak ditampilkan secara visual, Anda mungkin tidak ingin elemen tersebut menimbulkan celah besar pada tampilan. Ini sangat masuk akal ketika web sebagian besar berupa teks. Ini kurang berguna sebagai perilaku ketika kita menggunakan elemen untuk meletakkan desain.

Membuat Konteks Pemformatan Blok

Konteks Pemformatan Blok (BFC) baru juga akan mencegah runtuhnya margin melalui elemen yang memuatnya. Jika kita melihat kembali contoh anak pertama dan terakhir, berakhir dengan margin di luar pembungkus, dan memberikan display: flow-root , sehingga menciptakan BFC baru, margin tetap berada di dalam.

Untuk mengetahui lebih lanjut tentang display: flow-root , baca artikel saya “Memahami Tata Letak CSS Dan Konteks Pemformatan Blok”. Mengubah nilai properti overflow ke auto akan memiliki efek yang sama, karena ini juga membuat BFC baru, meskipun mungkin juga membuat scrollbar yang tidak Anda inginkan dalam beberapa skenario.

Wadah Fleksibel Dan Grid

Kontainer Flex dan Grid membuat konteks pemformatan Flex dan Grid untuk anak-anak mereka, sehingga mereka memiliki perilaku yang berbeda untuk memblokir tata letak. Salah satu perbedaan itu adalah bahwa margin tidak runtuh:

“Wadah fleksibel membuat konteks pemformatan fleksibel baru untuk kontennya. Ini sama dengan membuat konteks pemformatan blok, kecuali bahwa tata letak fleksibel digunakan sebagai ganti tata letak blok. Misalnya, pelampung tidak mengganggu wadah fleksibel, dan margin wadah fleksibel tidak runtuh dengan margin isinya.

— Flexbox Tingkat 1

Jika kita mengambil contoh di atas dan membuat pembungkus menjadi wadah fleksibel, menampilkan item dengan flex-direction: column , Anda dapat melihat bahwa margin sekarang ditampung oleh pembungkus. Selain itu, margin antara item fleksibel yang berdekatan tidak runtuh satu sama lain, jadi kami berakhir dengan 100 piksel di antara item fleksibel, total 50 piksel di bagian atas dan bawah item.

Strategi Margin Untuk Situs Anda

Karena margin runtuh, merupakan ide bagus untuk menemukan cara yang konsisten dalam menangani margin di situs Anda. Hal paling sederhana yang harus dilakukan adalah hanya menentukan margin di bagian atas atau bawah elemen. Dengan cara itu, Anda tidak boleh terlalu sering mengalami masalah penurunan margin karena sisi dengan margin akan selalu berdekatan dengan sisi tanpa margin.

Catatan : Harry Roberts memiliki posting bagus yang merinci alasan mengapa menetapkan margin hanya dalam satu arah adalah ide yang bagus, dan bukan hanya karena menyelesaikan masalah margin yang runtuh.

Solusi ini tidak menyelesaikan masalah yang mungkin Anda hadapi dengan margin pada anak-anak yang runtuh melalui orang tua mereka. Masalah khusus itu cenderung kurang umum, dan mengetahui mengapa hal itu terjadi dapat membantu Anda menemukan solusi. Solusi ideal untuk itu adalah dengan memberikan komponen yang memerlukan display: flow-root , sebagai cadangan untuk browser lama, Anda dapat menggunakan overflow untuk membuat BFC, mengubah induk menjadi wadah fleksibel, atau bahkan memperkenalkan satu piksel padding. Jangan lupa bahwa Anda dapat menggunakan kueri fitur untuk mendeteksi dukungan untuk display: flow-root sehingga hanya browser lama yang mendapatkan perbaikan yang kurang optimal.

Sebagian besar waktu, saya menemukan bahwa mengetahui mengapa margin runtuh (atau tidak) adalah hal utama. Anda kemudian dapat mencari tahu berdasarkan kasus per kasus bagaimana menghadapinya. Apa pun yang Anda pilih, pastikan untuk membagikan informasi itu dengan tim Anda. Cukup sering penurunan margin agak misterius, jadi alasan untuk melakukan sesuatu untuk melawannya mungkin tidak jelas! Sebuah komentar dalam kode Anda sangat membantu — Anda bahkan dapat menautkan ke artikel ini dan membantu membagikan pengetahuan tentang penurunan margin.

Saya pikir saya akan melengkapi artikel ini dengan beberapa informasi terkait margin lainnya.

Persentase Margin

Saat Anda menggunakan persentase dalam CSS, itu harus berupa persentase dari sesuatu. Margin (dan padding) yang diatur menggunakan persentase akan selalu menjadi persentase dari ukuran inline (lebar dalam mode penulisan horizontal) dari induknya. Ini berarti Anda akan memiliki bantalan berukuran sama di seluruh elemen saat menggunakan persentase.

Pada contoh CodePen di bawah ini, saya memiliki pembungkus yang lebarnya 200 piksel, di dalamnya ada kotak yang memiliki margin 10%, marginnya adalah 20 piksel di semua sisi, yaitu 10% dari 200.

Margin Dalam Dunia Aliran-Relatif

Kami telah berbicara tentang margin vertikal di seluruh artikel ini, namun, CSS modern cenderung memikirkan hal-hal dalam aliran relatif daripada cara fisik. Oleh karena itu, ketika kita berbicara tentang margin vertikal, kita benar-benar berbicara tentang margin dalam dimensi blok. Margin tersebut akan menjadi atas dan bawah jika kita berada dalam mode penulisan horizontal, tetapi akan menjadi kanan dan kiri dalam mode penulisan vertikal yang ditulis dari kiri ke kanan.

Setelah bekerja dengan logis, arah aliran relatif menjadi lebih mudah untuk berbicara tentang blok awal dan akhir blok, daripada atas dan bawah. Untuk mempermudah ini, CSS telah memperkenalkan spesifikasi Logical Properties and Values. Peta ini mengalirkan properti relatif ke properti fisik.

Untuk margin, ini memberi kita pemetaan berikut (jika kita bekerja dalam bahasa Inggris atau mode penulisan horizontal lainnya dengan arah teks kiri-ke-kanan).

• margin-top = margin-block-start
• margin-right = margin-inline-end
• margin-bottom = margin-block-end
• margin-left = margin-inline-start

Kami juga memiliki dua steno baru yang memungkinkan pengaturan kedua blok sekaligus atau keduanya sejajar.

• margin-block
• margin-inline

Dalam contoh CodePen berikutnya, saya telah menggunakan kata kunci relatif aliran ini dan kemudian mengubah mode penulisan kotak, Anda dapat melihat bagaimana margin mengikuti arah teks daripada diikat ke fisik atas, kanan, bawah, dan kiri.

Anda dapat membaca lebih lanjut tentang properti dan nilai logis di MDN atau di artikel saya "Memahami Properti dan Nilai Logis" di sini di Majalah Smashing.

Untuk Menyelesaikan

Anda sekarang tahu sebagian besar dari apa yang perlu diketahui tentang margin! Pendeknya:

• Keruntuhan margin adalah suatu hal. Memahami mengapa itu terjadi dan kapan tidak akan membantu Anda memecahkan masalah apa pun yang mungkin ditimbulkannya.
• Mengatur margin dalam satu arah hanya memecahkan banyak sakit kepala terkait margin.
• Seperti apa pun di CSS, bagikan dengan tim Anda keputusan yang Anda buat, dan beri komentar kode Anda.
• Memikirkan dimensi blok dan inline daripada fisik atas, kanan, bawah dan kiri akan membantu Anda saat web bergerak menuju mode penulisan agnostik.