Cara menetapkan margin dan padding CSS, dan helah susun atur yang sejuk 'Data-Gatsby-Head =' True '/> Christopher Nolan Lepaskan： 2025-02-09 13:05:16 asal 746 orang telah melayarinya

Tutorial ini menjelaskan perbezaan antara margin dan padding CSS, yang menggambarkan kesannya pada jarak unsur laman web. Kami akan meneroka margin runtuh, implikasi unit pelbagai dalam reka bentuk responsif, dan disimpulkan dengan margin CSS dan teknik susun atur padding.

Konsep Utama:

• Model kotak CSS adalah asas: unsur -unsur adalah kotak segi empat tepat yang ditakrifkan oleh kandungan, padding, sempadan, dan margin.
• box-sizing sering mengelirukan pemula. Lalai box-sizing: content-box menambah padding dan sempadan ke lebar dan ketinggian elemen. box-sizing: border-box adalah penyelesaian yang sama, memastikan padding dan sempadan dimasukkan ke dalam lebar dan ketinggian yang ditentukan.
• CSS tepat mengawal padding dan margin pada semua empat sisi elemen. Padding mengelilingi kandungan; Margin adalah lapisan luar, mewujudkan ruang antara elemen dan jirannya.
• margin dan padding menawarkan aplikasi serba boleh: elemen berpusat, elemen jarak, dan mengekalkan nisbah aspek imej. Menguasai teknik ini menyelesaikan banyak cabaran susun atur.

Memahami model kotak CSS:

elemen CSS adalah kotak segi empat tepat yang terdiri daripada:

• Kandungan
• Padding
• Border
• margin

Kandungan tinggal di pusat; padding melampirkan kandungan; sempadan mengelilingi padding; dan margin membentuk lapisan paling luar.

saiz kotak CSS dijelaskan:

box-sizing adalah sumber kekeliruan yang kerap. Dua elemen lebar 50% mungkin tidak sesuai dengan bekas mereka kerana menambah padding dan sempadan.

Lalai box-sizing: content-box meningkatkan lebar keseluruhan elemen apabila padding atau sempadan ditambah. box-sizing: border-box memudahkan susun atur dengan memasukkan padding dan sempadan dalam lebar yang ditentukan. Ramai CSS Reset menggunakan border-box untuk semua elemen:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

(Nota: Reset yang lebih mudah wujud, tetapi ini membolehkan pengecualian selektif.)

Terokai sumber selanjutnya pada MDN atau spesifikasi box-sizing. Demo interaktif meningkatkan pemahaman praktikal.

Menetapkan padding dalam css:

padding dikawal menggunakan

, padding-top, padding-right, padding-bottom, atau harta benda padding-left padding

Demo Codepen menggambarkan contoh -contoh ini. Perhatikan kesan mengeluarkan

/* All sides */
padding: 20px;

/* Vertical | Horizontal */
padding: 2em 4em;

/* Top | Horizontal | Bottom */
padding: 1em 20px 2em;

/* Top | Right | Bottom | Left */
padding: 10px 10% 2em 15%;

.

box-sizing: border-box

Menetapkan margin dalam CSS:

Sama seperti padding, margin dikawal menggunakan margin-top, margin-right, margin-bottom, margin-left, atau harta benda margin

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

demo codepen mempamerkan penggunaan margin dengan unsur -unsur terapung.

Pertimbangan Margin dan Padding:

Pemilihan unit:

Elakkan unit mutlak (piksel) untuk margin dan padding dalam reka bentuk responsif. Nilai berasaskan peratusan menyesuaikan diri dengan perubahan saiz skrin. Skala unit dengan saiz fon. Unit Viewport (, em, vw, vh) didasarkan pada saiz viewport. vmin vmax

Pengiraan unit:

Peratusan adalah relatif kepada lebar elemen induk. unit adalah relatif kepada saiz fon elemen. Unit Viewport adalah relatif kepada dimensi viewport. em

margin runtuh:

margin atas dan bawah unsur -unsur bersebelahan boleh runtuh menjadi margin tunggal. Margin ibu bapa dan anak juga boleh runtuh. Menambah padding atau sempadan menghalang ini.

Aplikasi praktikal:

elemen berpusat:
• Gunakan ke pusat unsur-unsur peringkat blok secara mendatar di dalam ibu bapa mereka. margin: 10px auto;
Unsur jarak:
• margin berkesan elemen ruang, terutamanya berguna dengan flexbox.
Mengekalkan nisbah aspek:
• Tetapkan ketinggian ibu bapa kepada sifar dan gunakan (dikira dari nisbah aspek) untuk mengekalkan nisbah aspek imej. padding-top

Kesimpulan:

Tutorial ini membezakan margin dan padding, menunjukkan sintaks mereka dan unit yang sesuai. Aplikasi susun atur praktikal dan sumber selanjutnya disediakan. Tingkatkan kemahiran CSS anda dengan teknik canggih.

FAQs:

margin vs padding:
• margin adalah ruang luaran; Padding adalah ruang dalaman.
Menetapkan Nilai: Gunakan
• dan sifat dengan pelbagai unit (piksel, peratusan, , margin). padding em margin shorthand: rem Hartanah
membolehkan menetapkan semua empat margin.
• Nilai negatif: margin Nilai negatif dibenarkan untuk kedua -duanya.
• nilai:
• untuk elemen pusat margin secara mendatar. auto Nilai peratusan: peratusan adalah relatif terhadap lebar ibu bapa. auto

Atas ialah kandungan terperinci Cara menetapkan margin dan padding CSS, dan helah susun atur yang sejuk 'Data-Gatsby-Head =' True '/>