Apa yang Anda Tidak Tahu Mengenai Mengira Peratusan Margin dalam CSS

Kebanyakan pereka web fikir mereka tahu CSS dengan baik. Lagipun, tidak banyak perkara itu - beberapa jenis pemilih, beberapa sedozen harta benda, dan beberapa peraturan yang tidak dapat diingat kerana mereka merosakkan akal fikiran. Tetapi apabila anda turun ke tahap yang menggembirakan, terdapat banyak butiran yang tidak jelas yang sedikit pereka benar-benar memahami.

Apabila saya mengkaji keputusan ujian CSS percuma yang saya tawarkan dalam talian selama enam bulan yang lalu, saya dapati satu soalan yang hampir tiada sesiapa betul. Daripada beribu-ribu orang yang mengambil ujian, kurang daripada 14% mendapatnya betul.

Persoalannya adalah: Bagaimana Anda Kira Peratusan Margin?

Soalan

Katakanlah laman web anda mempunyai bekas div, dan di dalamnya, kandungan div:

Sekarang, mari kita berikan kandungan itu div margin teratas:

.kandungan margin-top: 10%;

Baiklah, jadi 10% ... tetapi 10% daripada apa? Itulah persoalan itu hanya 13.8% orang boleh menjawab dengan betul. Dan perlu diingat: orang ini mempunyai akses kepada Google!

Apa yang saya sayang tentang soalan ini ialah ia seolah-olah jawapannya mesti jelas. Begitu banyak, saya mengesyaki kebanyakan orang hanya meneka (dan meneka salah). Tetapi mungkin tidak nampak jelas kepada anda. Maksud saya, jika anda benar-benar menggunakan imaginasi anda, terdapat banyak cara yang dapat dilihat oleh penyemak imbas margin seperti ini.

Jadi bagaimana jika saya mengecilkannya untuk anda kerana soalan dalam ujian sebenarnya banyak pilihan. Berikut adalah pilihan anda:

10% ketinggian div kandungan
10% ketinggian div kontena
10% daripada lebar div kandungan
10% daripada lebar div kontena

Ingat, hanya 13.8% orang boleh memilih jawapan yang betul dari senarai ini. Itulah cara yang lebih teruk daripada peluang!

Lihatlah dengan jawapannya; anda akan melihat terdapat hanya dua perkara yang perlu anda ketahui:

Kontena atau Kandungan?

Pertama, adalah saiz margin berdasarkan saiz div kandungan itu sendiri, atau pada saiz div kontena?

Sekarang ini bukan gimme, tetapi anda mungkin boleh mempercayai naluri anda. Jika saya menetapkan div menjadi 50% dari lebar bekasnya, dan kemudian saya mahu margin kiri dan kanannya mengisi ruang selebihnya, saya secara semula jadi menetapkannya kepada 25% setiap satu (jadi peratusan menambah sehingga 100%). Untuk itu, peratusan margin mestilah berdasarkan kepada dimensi kontena.

Pasti cukup, dua pertiga daripada orang yang mengambil ujian mendapatkan bahagian ini jawapan yang betul.

Lebar atau Ketinggian?

Kedua, adalah saiz margin atas berdasarkan lebar atau ketinggian elemen tersebut?

Sekiranya anda memberi perhatian, anda mungkin sudah bersedia. Kerana begitu sedikit orang untuk memilih jawapan yang betul, ini harus menjadi soalan silap, betul?

Namun, saya yakin anda tidak boleh mempercayainya jawapan tidak ketinggian. Nah, tidak.

Ya, kita bercakap tentang margin teratas di sini. Ya, saiz margin itu adalah ukuran tegak. Ya, sekiranya blok adalah 50% ketinggian bekasnya, dan anda memberikan margin teratas 25%, anda menjangkakan bahawa 25% ketinggian bekas. Dan anda akan menjadi salah.

Jangan berasa buruk jika anda fikir ia harus menjadi tinggi. Hampir 80% orang yang mengikuti ujian bersetuju dengan anda:

Ia menjadikan rasa ... Tidak, Betul!

Masih tidak percaya? Berikut adalah petikan dari spec CSS W3C:

Peratusan dikira berkenaan dengan lebar blok yang mengandungi kotak yang dihasilkan. Perhatikan bahawa ini adalah benar untuk margin-top dan margin-bottom juga.

Begitu juga dengan padding atas dan bawah, sekiranya anda tertanya-tanya. Bagi sempadan, adalah haram untuk menentukan lebar mereka sebagai peratusan.

Jadi pada ketika ini, anda mungkin berfikir pencipta CSS sama ada bonkers, atau mereka hanya membuat kesilapan yang benar-benar bodoh. Tetapi saya di sini untuk memberitahu anda, terdapat dua sebab yang baik untuk meletakkan margin menegak pada lebar blok yang mengandungi:

Konsistensi Mendatar dan Menegak

Ada, sudah tentu, sebuah harta pendek yang membolehkan anda menentukan margin untuk semua empat blok:

margin: 10%;

Ini berkembang ke:

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

Sekarang, jika anda menulis sama ada di atas, anda mungkin mengharapkan margin pada semua empat blok itu bersaiz yang sama, bukankah anda? Tetapi jika margin margin dan margin-margin adalah berdasarkan lebar kontena, dan margin atas dan margin-bottom berdasarkan ketinggiannya, maka biasanya ia akan berbeza!

Mengelakkan Ketergantungan Pekeliling

CSS meletakkan kandungan dalam blok yang disusun secara menegak ke bawah halaman, jadi lebar blok biasanya ditentukan oleh lebar induknya. Dalam erti kata lain, anda boleh hitung lebar blok tanpa bimbang tentang apa dalam blok itu.

Ketinggian blok adalah perkara yang berbeza. Biasanya, ketinggiannya bergantung kepada ketinggian gabungan kandungannya. Tukar ketinggian kandungan, dan anda menukar ketinggian blok. Lihat masalah?

Untuk mendapatkan ketinggian kandungan, anda perlu mengetahui margin atas dan bawah yang digunakan untuknya. Dan jika margin tersebut bergantung pada ketinggian blok induk, anda menghadapi masalah, kerana anda tidak dapat mengira satu tanpa mengetahui yang lain!

Mengurangkan margin tegak pada lebar dari bekas kontena yang bergantung kepada bulat, dan menjadikannya mungkin untuk meletakkan halaman.

Ace the Class

Jadi di sana anda mempunyai: persoalan paling sukar pada ujian, dan sekarang anda boleh menjawabnya. Ingin tahu bagaimana anda akan melakukan ujian yang lain? Cuba sendiri. Saya berjanji, kebanyakan soalan adalah lebih mudah daripada yang satu ini.

Sementara itu, saya mencari soalan baru yang paling sukar! Apa detail CSS yang anda fikir tiada siapa yang tahu?

Nota editor: Ini ditulis untuk Hongkiat.com oleh Kevin Yank. Kevin telah menulis tentang web sejak tahun 1999, dengan buku-buku mengenai PHP, CSS, dan JavaScript untuk namanya. Dia juga menjadi tuan rumah podcast, bercakap di persidangan, dan menghasilkan latihan video, semua tentang Web. Dia kini mengetuai pasukan pembangunan di Sit the Test, aplikasi web untuk membuat dan mengambil ujian dalam talian.

Lagi mengenai Hongkiat:

Reka Bentuk Web: Ketinggian Lajur Sama Dengan CSS
6 Trik CSS untuk Sejajar Kandungan secara menegak
Lihat Ke Unit CSS: Piksel, EM, dan Peratusan
A Look Into: CSS3 Box-sizing

Sekarang Baca: 10 Ciri CSS3 Tersembunyi Anda Perlu Tahu