CSS layouting - box model padding, border, box sizing

CSS layouting - box model padding, border, box sizing

Seperti margin padding juga hanya mempunyai 2 value yaitu px Dan % Dan cara penggunaan nya pun sama 

contoh {

padding:200px;

}

padding auto

Auto ini Nilai yang bisa Kita beri untuk pada khusus untuk padding Kiri Dan padding Kanan

Penggunaan

padding-right:auto;

Padding-left:auto;

Shorthand

Menyingkat penulisan margin

Padding:200px;

Artinya saya akan membuat ke 4 sisi nya mempunyai padding 200px

Padding: 20px 20px;

Ini artinya value kesatu untuk atas Dan bawah Dan value kedua untuk Kiri Dan Kanan.

Padding : 20px 20px 2px 2px;

Ini artinya dari atas 20px sejarah jarum jam

Padding: 20px 20px 20px;

Ini artinya atas 20px Kiri Kanan 20px Dan bawah 20px.

Perbedaan padding Dan margin 

Kalau padding itu tidak bisa diberi Nilai negatif ,Dan padding  menambah ukuran element jadi Kita misal mempunyai box ukuran 25px Lalu Kita kasih padding 5px maka ukuran box nya berubah tidak lagi 25px nah untuk mengatasi permasalahan ini itu nanti ada satu properti yang bisa Kita pakai.

Border

Untuk border Ada 3 value yaitu ukuran border,style border ,Dan warna border

Contoh {

border:5px solid black;

}

Ada beberapa style yang bisa Kita pakai yang di atas yaitu solid Lalu dotted,dashed,double

Contoh {

border-left:20px dotted black;

border-right:20px solid skyblue;

}

Nah tadi Ada suatu properti yang bisa mengatasi permasalahan padding properti tersebut adalah box-sizing 

contoh  {

Box-sizing:border-box;

}