masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial css > Bagaimana Menggunakan Peratusan Padding atau Margin Berdasarkan Ketinggian Bekas Induk dalam CSS?

Bagaimana Menggunakan Peratusan Padding atau Margin Berdasarkan Ketinggian Bekas Induk dalam CSS?

Patricia Arquette

Lepaskan： 2024-12-18 10:04:14

asal

607 orang telah melayarinya

How to Use Percentage Padding or Margin Based on Parent Container Height in CSS?

Cara Menetapkan Padding atau Margin sebagai Peratusan Ketinggian Bekas Induk

Apabila cuba menjajarkan elemen secara menegak menggunakan CSS, ia mungkin kelihatan logik untuk menetapkan sifat padding-top atau margin-top sebagai peratusan ketinggian bekas induk. Walau bagaimanapun, menggunakan peratusan dengan padding-top dan margin-top menghasilkan nilai berbanding dengan lebar bekas, menyebabkan gelagat yang tidak dijangka apabila lebar bekas berubah.

Penyelesaian

Untuk menetapkan padding atau margin sebagai peratusan ketinggian bekas induk, elakkan menggunakan padding-top dan margin-top. Sebaliknya, tetapkan sifat atas atau bawah elemen dalam bekas induk.

<div>

<div>

Salin selepas log masuk

Penjelasan

Dengan menggunakan sifat teratas, kedudukan elemen anak kini relatif kepada ketinggian bekas induk, memastikan penjajaran menegak kekal konsisten tanpa mengira lebar bekas.

Atas ialah kandungan terperinci Bagaimana Menggunakan Peratusan Padding atau Margin Berdasarkan Ketinggian Bekas Induk dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Main dan Jeda Video HTML5 Menggunakan jQuery? Artikel seterusnya：Mengapa `` Tidak Menyokong Reka Letak Flexbox dalam Penyemak Imbas Moden?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2224

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2366

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1978

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...