Salah satu hal pertama yang banyak dari kita pelajari ketika kita belajar CSS adalah fitur dari berbagai elemen blok di CSS, digambarkan sebagai "Model Blok CSS". Salah satu elemen dalam model blok adalah margin (margin luar), area transparan di sekitar blok yang mengusir elemen lain dari isi blok ini. Properti
margin-top ,
margin-right ,
margin-bottom dan
margin-left digambarkan sedini CSS1, bersama dengan properti margin yang disingkat untuk pengaturan simultan di keempat properti.
Margin tampaknya cukup mudah, namun, dalam artikel ini kita akan melihat beberapa poin yang orang temukan ketika menggunakannya. Secara khusus, bagaimana margin berinteraksi satu sama lain dan bagaimana jatuhnya margin luar benar-benar bekerja.
Model blok CSS
Seperti semua artikel tentang komponen Model Blok CSS CSS, kita harus menentukan apa yang kita maksudkan dengan ini dan bagaimana model itu diklasifikasikan dalam berbagai versi CSS. Model blok mengacu pada bagaimana komponen yang berbeda dari blok - konten (pad), padding (bantalan), perbatasan (bingkai) dan margin (bantalan) -ditempatkan dan berinteraksi satu sama lain. Dalam CSS1, model blok digambarkan menggunakan diagram ASCII yang ditunjukkan pada gambar di bawah ini.
Keempat properti untuk setiap sisi blok dan properti margin disingkat didefinisikan dalam CSS1.
Spesifikasi CSS2.1 memiliki ilustrasi untuk menunjukkan model blok dan juga mendefinisikan istilah yang kami terus gunakan untuk menggambarkan blok yang berbeda. Spesifikasi tersebut menguraikan kotak konten, kotak bantalan, kotak batas, dan kotak margin, yang masing-masing ditentukan oleh batas konten, bantalan, batas, dan margin.
Saat ini ada spesifikasi untuk versi
Block Model 3 sebagai konsep kerja. Saat mendefinisikan Model Blok dan
margin , ia mengembalikan kita ke CSS2, jadi di seluruh artikel kita akan menggunakan definisi dari CSS2.
Ciutkan margin
Spesifikasi CSS1 tidak hanya menentukan margin, tetapi juga keruntuhannya. Perilaku ini telah menjadi sumber banyak kekecewaan. Runtuh margin masuk akal ketika Anda mempertimbangkan bahwa pada masa itu, CSS digunakan sebagai bahasa markup untuk dokumen teks. Collapsing margin berarti bahwa ketika heading dengan margin yang lebih rendah diikuti oleh paragraf yang memiliki margin atas, kedua indentasi ini tidak bertambah, sehingga menciptakan celah besar di antara elemen-elemen tersebut.
Ketika dua margin runtuh, ruang antara elemen menjadi sama dengan yang lebih besar dari dua indentasi. Lekukan yang lebih kecil benar-benar berakhir di dalam yang lebih besar
Keruntuhan margin dalam situasi berikut:
- Saudara yang berdekatan (orang tua tunggal)
- Blok kosong
- Induk dan anak pertama / terakhir
Elemen Keperawatan yang Berdekatan
Saya akan memulai deskripsi dengan menunjukkan bagaimana margin runtuh antara saudara kandung yang berdekatan. Kecuali seperti yang disebutkan di bawah ini, jika Anda memiliki dua elemen ditampilkan satu per satu di aliran normal, margin bawah elemen pertama akan runtuh dengan margin atas elemen berikutnya.
Dalam contoh CodePen di bawah ini, ada tiga elemen
div . Untuk elemen pertama, margin atas dan bawah adalah 50px, untuk yang kedua - 20px, untuk yang ketiga - 3em. Margin antara dua elemen pertama adalah 50px, karena margin yang lebih rendah dari elemen yang lebih rendah diserap oleh margin yang lebih tinggi dari elemen atas. Margin antara dua elemen kedua adalah 3em, karena 3em lebih besar dari 20 piksel pada margin yang lebih rendah dari elemen kedua.
Blok kosong
Jika blok kosong, margin atas dan bawahnya bisa saling runtuh. Dalam contoh CodePen berikut, elemen kedua dengan kelas
empty (tidak terlihat, karena kosong) memiliki margin atas dan bawah 50px, namun, ruang antara elemen pertama dan ketiga bukan 100 piksel, tetapi 50. Ini adalah hasil dari keruntuhan dua margin.
Menambahkan sesuatu ke blok (bahkan padding) akan menyebabkan margin atas dan bawah digunakan, tidak runtuh.
Induk dan anak pertama / terakhir
Skenario keruntuhan margin ini membingungkan orang lebih sering daripada yang lain, karena tidak intuitif. Di CodePen berikutnya, kita memiliki
div dengan
wrapper kelas (wrapper), dan saya mengatur
div ini
div properti
outline merah, sehingga batas-batasnya dapat dilihat. Ketiga anak memiliki margin 50 piksel. Namun, elemen pertama dan terakhir berdekatan dengan batas elemen wrapper; tidak ada lekukan 50 piksel antara elemen dan pembungkus.
Ini karena margin anak runtuh dengan margin orangtua sedemikian rupa sehingga berakhir di luar orangtua. Anda dapat melihat ini jika Anda menguji anak menggunakan panel browser pengembang. Area yang disorot dengan warna kuning adalah margin.
Ciutkan hanya margin
Contoh terakhir juga menyoroti sesuatu tentang collapsing margin. Dalam CSS2, hanya margin vertikal (atas dan bawah) yang dirancang untuk runtuh. Oleh karena itu, dalam contoh di atas, margin di kiri dan kanan tidak runtuh dan berakhir di dalam pembungkus.
Catatan: Perlu diingat bahwa margin runtuh hanya ke arah blok, misalnya antara paragraf.
Pencegahan keruntuhan
Margin tidak runtuh jika elemen diatur ke posisi absolut atau properti
float . Namun, jika Anda berada dalam situasi di mana margin runtuh, bagaimana ini bisa dicegah?
Runtuh margin tidak terjadi dalam situasi ketika ada sesuatu di antaranya.
Misalnya, margin atas dan bawah dari blok kosong tidak runtuh jika blok diatur ke perbatasan atau padding. Pada contoh di bawah ini, saya menambahkan blok padding 1px. Sekarang di bagian atas dan bawah blok ada margin 50px.
Ini adalah logikanya: jika blok kosong tidak memiliki batas atau bantalan, itu menjadi hampir tidak terlihat. Misalnya, bisa berupa paragraf kosong yang ditempatkan di markup CMS Anda. Jika CMS Anda menambahkan elemen paragraf yang berlebihan, Anda mungkin tidak ingin mereka menyebabkan lekukan yang besar di antara paragraf lain karena marginnya diperhitungkan. Tambahkan sesuatu ke blok dan dapatkan indentasi ini.
Perilaku serupa dapat dilihat dengan margin anak pertama atau terakhir yang marginnya melampaui orang tua. Jika kita menambahkan batas pada induk, margin anak akan tetap di dalam.
Dan lagi, ada logika dalam perilaku ini. Jika Anda memiliki elemen pembungkus untuk keperluan semantik yang tidak ditampilkan secara visual, Anda mungkin tidak ingin mereka membuat lekukan besar saat ditampilkan. Ini lebih berguna ketika web sebagian besar berupa teks. Dan perilaku ini kurang bermanfaat ketika kita menggunakan elemen tata letak.
Membuat "Block Formatting Context"
"Block Formatting Context" (BFC) yang baru akan mencegah margin dari elemen induk. Jika kita melihat kembali contoh dengan anak-anak pertama dan terakhir yang marginnya berada di luar batas elemen pembungkus dan mengatur pembungkus untuk
display: flow-root , sehingga menciptakan BFC, margin anak-anak akan tetap di dalam.
Untuk mempelajari 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 juga menciptakan BFC baru, meskipun dapat menyebabkan bilah gulir yang tidak diperlukan dalam kasus tertentu
Flex dan Grid Containers
Wadah Flex dan Grid mengatur konteks format Flex dan Grid untuk anak-anak, sehingga mereka memiliki perilaku tata letak blok yang berbeda. Salah satu perbedaan ini adalah bahwa margin tidak runtuh:
Wadah fleksibel menetapkan konteks format fleksibel baru untuk konten. Ini sama dengan mengatur konteks pemformatan blok, kecuali bahwa markup fleksibel digunakan sebagai pengganti markup blok. Misalnya, mengapung tidak berfungsi di dalam wadah fleksibel, dan margin wadah fleksibel tidak runtuh dengan margin elemen anak.
- Flexbox Level 1
Jika kita mengambil contoh di atas dan membungkusnya dengan wadah Flex, menunjukkan arah sumbu utama arah fleksibel: kolom, menjadi jelas bahwa sekarang margin anak-anak tidak melampaui bungkus. Selain itu, margin antara item fleksibel yang berdekatan tidak runtuh, jadi kami mendapatkan jarak 100 piksel antara item fleksibel, yang merupakan jumlah dari margin atas dan bawah, yang masing-masing 50px.
Strategi margin untuk situs web Anda
Karena runtuh, solusi yang baik adalah menawarkan cara yang konsisten untuk bekerja dengan margin di situs Anda. Hal paling sederhana yang dapat Anda lakukan adalah membuat aturan untuk menetapkan margin hanya di bagian atas atau bawah elemen. Dalam hal ini, Anda tidak boleh terlalu sering mengalami masalah keruntuhan, karena sisi di mana margin ditetapkan akan selalu berdekatan dengan sisi elemen lain tanpa margin.
Catatan : Harry Roberts
memiliki publikasi yang luar biasa yang merinci alasan mengapa menetapkan margin dalam satu arah saja adalah ide yang bagus, dan bukan hanya karena menyelesaikan masalah keruntuhan.
Pendekatan ini tidak menyelesaikan masalah margin yang keluar dari elemen anak di luar batas orangtua, yang mungkin Anda temui. Masalah khusus ini biasanya kurang umum dan memahami mengapa ini terjadi dapat membantu menemukan solusi. Solusi ideal adalah mengatur komponen yang mengharuskan ini untuk
display: flow-root , dan dengan fallback (fallback) untuk browser lama Anda dapat menggunakan
overflow untuk membuat BFC (konteks format blok); mengubah induk menjadi wadah fleksibel; atau bahkan mengatur padding ke 1px. Ingatlah bahwa Anda dapat menggunakan permintaan dukungan browser untuk properti untuk menentukan apakah properti
display: flow-root didukung sehingga hanya browser lama yang mendapatkan solusi yang kurang optimal.
Saya percaya bahwa dalam kebanyakan kasus, memahami mengapa margin runtuh (atau tidak) adalah kuncinya. Ini akan memungkinkan Anda untuk menentukan cara menangani ini dalam setiap kasus. Metode apa pun yang Anda pilih, bagikan informasi ini dengan tim Anda. Cukup sering, keruntuhan margin sedikit misterius, sehingga cara untuk menghadapinya tidak selalu jelas. Sebuah komentar dalam kode Anda mungkin sesuai - Anda bahkan dapat memasukkan tautan ke artikel ini di dalamnya dan membantu berbagi pengetahuan tentang margin yang runtuh.
Saya memutuskan bahwa saya akan menambah artikel ini dengan beberapa data tambahan yang berkaitan dengan margin.
Margin bunga
Saat Anda menggunakan persentase dalam CSS, itu haruslah persentase dari sesuatu. Margin (dan juga padding) yang ditetapkan sebagai persentase akan selalu dihitung relatif terhadap lebar elemen induk. Ini berarti bahwa saat menggunakan persentase, Anda akan selalu memiliki margin yang sama dari semua sisi di sekitar elemen.
Dalam contoh CodePen di bawah ini, saya memiliki pembungkus dengan lebar 200px, di dalamnya adalah blok yang memiliki margin = 10%. Dari semua sisi, margin adalah 20px, yaitu 10% dari 200px.
Margin dalam dunia yang tergantung aliran
Sepanjang artikel ini, kami berbicara tentang margin vertikal, namun, CSS modern, sebagai aturan, berpikir tentang lokasi elemen relatif terhadap aliran lebih dari relatif terhadap sisi fisik. Karena itu, ketika kita berbicara tentang margin vertikal, kita sebenarnya berbicara tentang margin dalam dimensi blok. Margin ini dapat atas atau bawah dalam mode penulisan horizontal, atau kanan atau kiri dalam mode vertikal.
Setelah bekerja dengan arah logis relatif terhadap aliran, menjadi lebih mudah untuk berbicara tentang awal dan akhir blok daripada tentang bagian atas dan bawah. Untuk mempermudah ini, spesifikasi Properti dan Nilai Boolean diperkenalkan dalam CSS. Ini menggantikan sifat fisik dengan sifat yang berkaitan dengan aliran.
Jika kita berbicara tentang margin, ini memberi kita alternatif berikut (jika kita bekerja dengan bahasa Inggris atau mode lain yang direkam secara horizontal dengan arah teks dari 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 properti disingkat baru:
Dalam contoh CodePen berikut, saya menggunakan kata kunci yang terkait dengan aliran dan kemudian mengubah mode ejaan blok. Anda dapat melihat bagaimana margin mengikuti aliran teks, daripada terikat pada sisi fisik.
Anda dapat membaca lebih lanjut tentang properti logis dan nilai-nilai pada
MDN atau di artikel saya,
Memahami Properti dan Nilai-Nilai Logis , di Smashing Magazine.
Kesimpulannya
Sekarang Anda tahu sebagian besar dari apa yang harus Anda ketahui tentang margin. Secara singkat:
- Margin bisa runtuh. Memahami kapan ini terjadi dan kapan tidak akan membantu Anda memecahkan masalah yang mungkin mereka buat.
- Memasang margin hanya dalam satu arah memecahkan banyak masalah yang terkait dengannya.
- Seperti halnya situasi CSS, bagikan keputusan yang Anda buat dengan tim Anda dan komentari kode Anda
- Memperhatikan pengukuran blok dan garis akun alih-alih sisi fisik, atas, kanan, bawah, dan kiri akan membantu Anda, karena web bergerak ke arah yang independen dari mode penulisan