Fungsi padding dan margin pada CSS

Padding dan Margin merupakan syntax yang digunakan untuk mendesain tampilan halaman web agar lebih eye catching yang di tulis pada style CSS. Padding dan Margin dapat digunakan di setiap selector ID #id dan Class .class yang tentunya membuat tampilan halaman jadi lebih rapi.

Padding

Jarak antara garis tepi/border suatu elemen ke bagian dalam/isi dari elemen itu sendiri.

Properti CSS Padding :
padding
padding-top
padding-right
padding-bottom
padding-left

Contoh Penulisan :

1 2 3 4 5 6

.ngulikweb{ padding-top: 10px ; padding-right: 5px ; padding-bottom: 10px ; padding-left: 5px ; }

Dengan Shorthand bisa di tuliskan :

1 2 3

.ngulikweb{ padding: 10px 5px 10px 5px ; /* atas-kanan-bawah-kiri */ }

Jika kita lihat contoh penulisan style css padding di atas bisa ketahui ukuran atas-bawah 10px dan kanan-kiri 5px maka bisa kita tuliskan :

1 2 3

.ngulikweb{ padding: 10px 5px ; /* atas-bawah 10px kanan-kiri 5px */ }

Jika ukuran atas-kanan-bawah-kiri sama misal 10px maka bisa kita tuliskan :

1 2 3

.ngulikweb{ padding: 10px; /* ukuran atas-kanan-bawah-kiri 10px */ }

Margin

Jarak antara garis tepi/border suatu elemen ke bagian sebelah luarnya atau jarak antara batas elemen ke elemen lainnya.

Properti CSS Margin :
margin
margin-top
margin-right
margin-bottom
margin-left

Contoh Penulisan :

1 2 3 4 5 6

.ngulikweb{ margin-top: 10px ; margin-right: 5px ; margin-bottom: 10px ; margin-left: 5px ; }

Dengan Shorthand bisa di tuliskan :

1 2 3

.ngulikweb{ margin: 10px 5px 10px 5px ; /* atas-kanan-bawah-kiri */ }

Jika kita lihat contoh penulisan style css padding di atas bisa ketahui ukuran atas-bawah 10px dan kanan-kiri 5px maka bisa kita tuliskan :

1 2 3

.ngulikweb{ margin: 10px 5px ; /* atas-bawah 10px kanan-kiri 5px */ }

Jika ukuran atas-kanan-bawah-kiri sama misal 10px maka bisa kita tuliskan :

1 2 3

.ngulikweb{ margin: 10px; /* ukuran atas-kanan-bawah-kiri 10px */ }

Tips “Gunakan penulisan shorthand dalam mebuat style css padding dan margin hal ini dapat menghemat tenaga dan membuat halaman web lebih ringan saat loading, referensi style css padding tampil di browser Mozilla Firefox image source

Read More