Padding & Margin
{ margin-left }
{ margin-top }
{ padding-top }
{ padding-left }
Content
{ padding-right }
{ margin-right }
{ padding-bottom }
{ margin-bottom }
Seperti yang tampak pada ilustrasi diatas, padding dan margin adalah ukuran jarak. Namun yang membedakan keduanya adalah :
- Padding adalah jarak langsung antara konten dengan kontainer pembatasnya.
- Sedangkan margin merupakan jarak antara kontainer yang membingkai konten dengan kontainer lain yang membingkainya.
- Kalau diibaratkan sebuah rumah yang berpagar menglilingi rumah tersebut, dan kita berada didalam rumah maka padding adalah jarak antara posisi kita dengan tembok rumah.
- Maka margin adalah jarak antara tembok rumah dengan pagar.
Ini dalah paragraf dengan bingkai warna biru,padding atas 20px, padding bawah 30px, padding kiri 10px dan padding kanan 40px
Penulisan kode CSS paragraf tersebut : paragraf { border: 1px solid blue; padding: 20px 40px 30px 10px; }
Pada CSS diatas, penulisan ukuran padding berurutan searah jarum jam mulai dari urutan pertama adalah padding-top (atas), kedua adalah padding-right (kanan), ketiga adalah padding-bottom (bawah) dan keempat adalah padding-left (kiri).Contoh 2
Ini adalah paragraf dengan bingkai warna merah dan padding kiri 30px.
Penulisan CSS-nya :paragraf {border: 1px solid red; padding-left: 30px;}
Contoh 3
Ini adalah paragraf dengan latar belakang coklat, teks warna putih dan padding atas 40px
Penulisan CSS-nya :paragraf { background: brown; color: white; padding-top: 40px;}