CSS Margin vs. Padding: Apa Bedanya?

   Jika Anda baru mengenal CSS , Anda mungkin pernah mendengar kata margin dan padding tetapi tidak yakin apa artinya, atau bagaimana menggunakannya dalam desain situs web Anda. Konsep-konsep ini melakukan hal serupa di CSS. Namun, mereka tidak persis sama, dan ada perbedaan mendasar yang penting dalam penggunaannya.

Setelah Anda sepenuhnya memahami perbedaan antara margin dan padding, Anda akan dapat membuat keputusan desain yang lebih baik untuk situs web Anda. Jadi mari kita lihat kedua properti ini dan apa fungsinya. Kami akan menyertakan banyak contoh visual untuk mengilustrasikan cara kerja komponen CSS yang penting ini.

perbedaan antara margin dan padding di CSS?

Di CSS, margin adalah ruang di sekitar batas elemen, sedangkan padding adalah ruang antara batas elemen dan konten elemen. Dengan kata lain, properti margin mengontrol ruang di luar elemen, dan properti padding mengontrol ruang di dalam elemen.

Mari jelajahi margin terlebih dahulu. Pertimbangkan elemen yang diilustrasikan di bawah ini, yang memiliki margin 10 piksel:

Ini berarti bahwa setidaknya akan ada 10 piksel ruang antara elemen ini dan elemen halaman yang berdekatan — margin “mendorong” tetangganya. Jika kita menyatukan beberapa elemen ini, kita akan melihat bagaimana margin menciptakan ruang putih di antara elemen-elemen tersebut, memberi mereka ruang untuk bernafas:

Di sisi lain, padding terletak di dalam batas elemen. Elemen di bawah memiliki padding 10px di sisi kiri dan kanan, dan padding 15px di sisi atas dan bawah:

Untuk membuat celah, padding memperbesar ukuran elemen atau mengecilkan konten di dalamnya. Secara default, ukuran elemen meningkat. Jika Anda ingin membuat celah dengan mengecilkan konten, setel properti box-sizing ke border-box (yaitu box-sizing: border-box ).