Yang Tidak Anda Ketahui Tentang Menghitung Persentase Margin di CSS

Sebagian besar desainer web berpikir mereka tahu CSS dengan cukup baik. Lagi pula, tidak ada yang banyak - beberapa tipe pemilih, beberapa lusin properti, dan beberapa aturan cascading yang hampir tidak perlu Anda ingat karena mereka masuk akal. Tetapi ketika Anda turun ke tingkat seluk-beluk, ada banyak detail tidak jelas yang benar-benar dipahami oleh beberapa desainer.

Ketika saya memeriksa hasil tes CSS gratis yang saya tawarkan secara online selama enam bulan terakhir, saya menemukan satu pertanyaan yang hampir tidak seorangpun benar. Dari ribuan orang yang mengikuti tes, kurang dari 14% melakukannya dengan benar.

Pertanyaannya adalah: Bagaimana Cara Menghitung Persentase Margin?

Pertanyaan

Katakanlah situs Anda memiliki wadah div, dan di dalamnya, sebuah konten div:

Sekarang, mari kita berikan konten itu div margin atas:

.content margin-top: 10%;

Oke, jadi 10% ... tapi 10% apa? Itu pertanyaannya hanya 13,8% orang yang dapat menjawab dengan benar. Dan perlu diingat: orang-orang ini memiliki akses ke Google!

Yang saya sukai dari pertanyaan ini adalah itu sepertinya jawabannya harus jelas. Sedemikian rupa sehingga saya curiga kebanyakan orang hanya menebak (dan menebak salah). Tapi mungkin itu tidak tampak jelas bagi Anda. Maksud saya, jika Anda benar-benar menggunakan imajinasi Anda, ada banyak cara browser dapat menghitung margin seperti ini.

Jadi bagaimana kalau saya mempersempitnya untuk Anda karena pertanyaan dalam tes ini sebenarnya pilihan ganda. Ini pilihanmu:

10% dari tinggi konten div
10% dari tinggi kontainer div
10% dari lebar konten div
10% dari lebar kontainer div

Ingat, hanya 13,8% orang yang dapat memilih jawaban yang benar dari daftar ini. Itu jauh lebih buruk daripada kebetulan!

Perhatikan baik-baik jawabannya; Anda akan melihat hanya ada dua hal yang perlu Anda ketahui:

Wadah atau Konten?

Pertama, adalah ukuran margin berdasarkan pada ukuran div itu sendiri, atau pada ukuran div kontainer?

Sekarang ini bukan beri, tetapi Anda mungkin bisa mempercayai insting Anda. Jika saya menetapkan div menjadi 50% dari lebar wadahnya, dan kemudian saya ingin margin kiri dan kanannya mengisi sisa ruang, saya secara alami akan mengaturnya masing-masing 25% (sehingga persentase bertambah hingga 100%). Agar itu berfungsi, persentase margin harus didasarkan pada dimensi wadah.

Benar saja, dua pertiga orang yang mengikuti tes mendapatkan jawaban yang benar.

Lebar atau Tinggi?

Kedua, adalah ukuran margin-top berdasarkan pada lebar atau tinggi elemen itu?

Jika Anda sudah memperhatikan, Anda mungkin sudah berjaga-jaga. Untuk begitu sedikit orang yang memilih jawaban yang benar, ini pasti pertanyaan jebakan, benar?

Namun, saya yakin Anda hampir tidak bisa percaya itu jawabannya bukan tinggi. Ya tidak.

Ya, kita berbicara tentang margin teratas di sini. Ya, ukuran margin itu adalah pengukuran vertikal. Ya, jika sebuah blok adalah 50% dari ketinggian wadahnya, dan Anda memberinya margin atas 25%, Anda akan mengharapkan bahwa itu menjadi 25% dari tinggi wadah.. Dan kamu salah.

Jangan merasa buruk jika Anda pikir itu harus tinggi. Hampir 80% orang yang mengikuti tes setuju dengan Anda:

Masuk Akal ... Tidak, Sungguh!

Masih tidak percaya? Berikut ini kutipan dari spesifikasi W3C CSS:

Persentase dihitung sehubungan dengan lebar blok berisi kotak yang dihasilkan. Perhatikan bahwa ini berlaku juga untuk margin-top dan margin-bottom.

Hal yang sama berlaku untuk padding atas dan bawah, jika Anda bertanya-tanya. Adapun perbatasan, ilegal menentukan lebar mereka sebagai persentase.

Jadi pada titik ini, Anda mungkin berpikir bahwa pembuat CSS juga gila, atau mereka hanya membuat kesalahan yang sangat bodoh. Tapi saya di sini untuk memberi tahu Anda, ada dua alasan bagus untuk mendasarkan margin vertikal pada lebar blok yang mengandung:

Konsistensi Horisontal dan Vertikal

Tentu saja ada properti steno yang memungkinkan Anda menentukan margin untuk keempat sisi blok:

margin: 10%;

Ini berkembang menjadi:

margin-top: 10%; margin-right: 10%; margin-bottom: 10%; margin-kiri: 10%;

Sekarang, jika Anda menulis salah satu dari yang di atas, Anda mungkin berharap margin di keempat sisi blok memiliki ukuran yang sama, bukan? Tetapi jika margin-kiri dan margin-kanan didasarkan pada lebar wadah, dan margin-atas dan margin-bawah didasarkan pada tingginya, maka mereka biasanya akan berbeda!

Menghindari Ketergantungan Melingkar

CSS menjabarkan konten dalam blok yang ditumpuk secara vertikal di bawah halaman, sehingga lebar blok biasanya ditentukan sepenuhnya oleh lebar induknya. Dengan kata lain, kamu bisa hitung lebar blok tanpa khawatir tentang apa dalam blok itu.

Ketinggian balok adalah masalah yang berbeda. Biasanya, tingginya tergantung pada tinggi gabungan isinya. Ubah ketinggian konten, dan Anda mengubah ketinggian blok. Lihat masalahnya?

Untuk mendapatkan tinggi konten, Anda perlu mengetahui margin atas dan bawah yang diterapkan padanya. Dan jika margin itu tergantung pada ketinggian blok induk, Anda dalam kesulitan, karena Anda tidak dapat menghitung satu tanpa mengetahui yang lain!

Mendasarkan margin vertikal pada lebar wadah istirahat ketergantungan melingkar itu, dan memungkinkan untuk meletakkan halaman.

Ace Kelas

Jadi begitulah: pertanyaan tersulit dalam ujian, dan sekarang Anda bisa menjawabnya. Ingin tahu bagaimana yang akan Anda lakukan pada sisa tes? Cobalah sendiri. Saya berjanji, sebagian besar pertanyaan jauh lebih mudah daripada yang ini.

Sementara itu, saya mencari pertanyaan terberat baru! Menurut Anda apa detail CSS yang tidak diketahui orang?

Catatan Editor: Ini ditulis untuk Hongkiat.com oleh Kevin Yank. Kevin telah menulis tentang web sejak 1999, dengan buku-buku tentang PHP, CSS, dan JavaScript untuk namanya. Dia juga menyelenggarakan podcast, berbicara di konferensi, dan menghasilkan pelatihan video, semua tentang Web. Dia sekarang memimpin tim pengembangan di Sit the Test, aplikasi web untuk membuat dan mengikuti tes online.

Lebih lanjut tentang Hongkiat:

Desain Web: Tinggi Kolom Setara Dengan CSS
6 Trik CSS untuk Menyelaraskan Konten Secara Vertikal
Pandangan Ke Unit CSS: Piksel, EM, dan Persentase
A Look Into: Ukuran Kotak CSS3

Sekarang Baca: 10 Properti CSS3 Tersembunyi Yang Harus Anda Ketahui