Beranda » Coding » CSS - marginauto; - Bagaimana itu bekerja

    CSS - marginauto; - Bagaimana itu bekerja

    Menggunakan margin: otomatis memusatkan elemen blok secara horizontal adalah teknik yang terkenal. Tetapi pernahkah Anda bertanya-tanya mengapa atau bagaimana cara kerjanya? Untuk menjawab ini, pertama-tama kita perlu melihat bagaimana margin: otomatis bekerja. Juga dalam campuran adalah apa mobil dapat dilakukan dalam margin, jika berfungsi untuk pemusatan vertikal, dan beberapa masalah lainnya.

    Tapi pertama-tama, apa yang terjadi mobil sebenarnya?

    Definisi dari mobil bervariasi dengan elemen, jenis elemen dan konteks. Dalam margin, mobil dapat berarti satu dari dua hal: mengambil ruang yang tersedia atau 0 px. Keduanya akan mendefinisikan tata letak yang berbeda untuk suatu elemen.

    "otomatis" Mengambil Ruang yang Tersedia

    Ini adalah penggunaan margin yang paling umum mobil kita sering bertemu. Dengan menugaskan mobil ke margin kiri dan kanan elemen, mereka mengambil ruang horisontal yang tersedia dalam wadah elemen secara merata - dan dengan demikian elemen tersebut akan terpusat.

    Namun, ini hanya akan berfungsi untuk margin horisontal (lebih pada Mengapa nanti), dan juga tidak akan bekerja dengan melayang dan elemen sebaris dan dengan sendirinya, itu juga tidak bisa bekerja di mutlak dan elemen posisi tetap (Namun kami akan melihat bagaimana membuat mereka bekerja).

    Faux Float Dengan Mengambil Ruang Yang Tersedia

    Sejak mobil di kedua margin kanan dan kiri mengambil ruang "tersedia" sama, apa yang Anda pikirkan akan terjadi ketika nilai mobil hanya diberikan kepada salah satu dari mereka?

    Margin kiri atau kanan dengan mobil akan mengambil semua ruang "tersedia" yang membuat elemen tampak seperti telah memerah ke kanan atau kiri.

    “mobil” Dihitung hingga 0px

    Seperti disebutkan sebelumnya, mobil tidak akan berfungsi dalam elemen apung, inline, dan absolut. Semua elemen ini sudah ada memutuskan tata letak mereka, jadi tidak ada gunanya menggunakan mobil untuk margin dan mengharapkannya terpusat begitu saja.

    Itu akan mengalahkan tujuan awal menggunakan sesuatu seperti mengapung. Karenanya mobil akan memiliki nilai 0px pada elemen tersebut.

    mobil juga tidak akan bekerja pada elemen blok khas jika tidak memiliki lebar. Semua contoh yang saya tunjukkan sejauh ini memiliki lebar.

    Nilai lebar mobil akan memiliki 0px margin. Lebar elemen blok biasanya menutupi kontenernya saat itu mobil atau 100% dan karenanya margin mobil akan dihitung ke 0px dalam kasus seperti itu.

    Apa Yang Terjadi pada Margin Vertikal Dengan Nilai mobil?

    mobil baik margin atas dan bawah selalu dihitung dengan 0px (kecuali untuk elemen absolut). W3C spec mengatakannya seperti ini:

    “Jika “margin-top” atau “margin-bottom” aku s “mobil”, nilai yang digunakan adalah 0 "

    Itu sebabnya, yah sejauh itu, sebuah misteri. Bisa jadi karena aliran halaman vertikal yang khas, di mana ukuran halaman bertambah tinggi. Jadi, memusatkan elemen secara vertikal di wadahnya tidak akan membuatnya tampak terpusat, relatif terhadap halaman itu sendiri, tidak seperti ketika itu dilakukan secara horizontal (dalam kebanyakan kasus).

    Dan mungkin itu karena alasan yang sama, mereka memutuskan untuk menambahkan pengecualian untuk elemen absolut yang dapat dipusatkan secara vertikal di sepanjang ketinggian seluruh halaman.

    Bisa juga karena efek keruntuhan margin (keruntuhan elemen yang berdekatan” margin) yang merupakan pengecualian lain untuk margin vertikal.

    Namun, yang terakhir tampaknya menjadi kasus yang tidak mungkin - karena elemen yang tidak merusak margin mereka - seperti Mengapung, dan elemen dengan meluap Selain daripada terlihat, masih menetapkan 0px margin vertikal untuk mobil.

    Memusatkan Elemen-elemen yang Diposisikan Sepenuhnya

    Karena kebetulan ada pengecualian untuk elemen yang benar-benar diposisikan, kami”akan digunakan mobil nilai untuk memusatkan satu secara vertikal dan horizontal. Tapi sebelum itu, kita perlu mencari tahu kapan margin: otomatis sebenarnya berfungsi seperti yang kita inginkan dalam elemen yang benar-benar diposisikan.

    Di sinilah spesifikasi W3C lain masuk:

    "Jika ketiganya “kiri”, “lebar”, dan “kanan” adalah “mobil”: Pertama atur apa saja “mobil” nilai untuk “margin-kiri” dan “margin kanan” ke 0 ... "

    "Jika tidak ada dari ketiganya “mobil”: Jika keduanya “margin-kiri” dan “margin kanan” adalah “mobil”, pecahkan persamaan di bawah batasan ekstra bahwa kedua margin mendapatkan nilai yang sama "

    Cukup banyak yang mengatakan itu untuk horisontal mobil margin untuk merebut ruang yang sama, nilai untuk kiri, lebar dan kanan seharusnya tidak mobil , nilai default mereka. Jadi yang harus kita lakukan adalah memberi mereka nilai dalam elemen yang benar-benar diposisikan. kiri dan kanan harus punya nilai yang sama untuk pemusatan sempurna.

    Spesifikasi ini juga menyebutkan sesuatu yang mirip dengan margin vertikal.

    “Jika ketiganya “teratas”, “tinggi”, dan “bawah” otomatis, diatur “teratas” ke posisi statis ... ”

    “Jika tidak satupun dari ketiganya “mobil”: Jika keduanya “margin-top” dan “margin-bottom” adalah “mobil”, pecahkan persamaan di bawah batasan ekstra bahwa kedua margin mendapatkan nilai yang sama ... ”

    Karenanya, untuk menjadi elemen absolut berpusat secara vertikal, -nya teratas, tinggi, dan bawah nilai seharusnya tidak mobil.

    Sekarang dengan menggabungkan semua ini, inilah yang kita”saya akan mendapatkan:

    Kesimpulan

    Jika Anda ingin menyiram elemen pada halaman Anda ke kanan atau kiri tanpa membungkus elemen-elemen berikut (seperti apa yang terjadi dengan float), ingatlah ada opsi untuk menggunakan mobil untuk margin.

    Mengubah elemen menjadi absolut hanya agar dapat dipusatkan secara vertikal mungkin bukan ide yang bagus. Ada opsi lain seperti flexbox dan transformasi CSS yang lebih cocok untuk mereka.