CSS Layouting : Box model (padding)

padding

padding adalah area didalam kotak(antara border dan konten)

contoh penggunaan :

    diatas saya sudah mempunyai html dan css, sekarang jika kita beri padding-left: 20px; maka hasilnya sebelah kiri konten ada space 20px

    begitupun pada keepat sisinya jika diberi padding maka akan membuat space antara konten

padding juga dapat disingkat seperti margin

- padding: 10px;      artinya diberi padding 10px pada keempat sisi 

- padding: 10px 20px;     artinya diberi padding atas bawah 10px dan kiri kanan 20px

- padding: 10px 20px 30px;     artinya diberi padding atas 10px, bawah 20px, kiri kanan 30px

- padding: 10px 20px 30px 40px;     artinya diberi padding atas 10px, kanan 20px, bawah 30px, kiri 40px (searah jarum jam)

sifat padding

- padding tidak bisa menggunakan nilai negatif

- padding tidak mempunyai nilai auto

- padding mempengaruhi nilai dari ukuran box yang telah kita buat(ukuran box bertambah) 

cara mengatasi ukuran box yang berubah karena padding, kita perlu menggunakan property css yang bernama box-sizing: border-box; maka ukuran kotak tidak akan terpengaruh oleh padding