Pengenalan CSS (margin dan padding)

Ini adalah lanjutan dari tulisan tentang pengenalan CSS sebelumnya Pengenalan CSS Id Tags dan Class Tags dan kali ini saya akan membahas tentang margin dan padding

margin dan padding

Sintaks:
margin: margin-top | margin-right | margin-bottom | margin-left
padding: padding-top | padding-right | padding-bottom | padding-left

Contoh:

.left {
margin: 11px 12px 30px 20px;
padding: 11px 12px 30px 20px;
}

Supaya memudahkan mengingat, saya akan menganalogikannya dengan putaran jarum
jam yang selalu dimulai dari jam 12 (top).

Untuk margin dan padding, tidak memiliki perbedaan, dimana ia bisa dideklarasikan dengan lebih sederhana lagi:

contoh:

.left {
margin: 15px;
}

berarti, untuk margin atas, kanan, bawah, dan kiri memiliki value 15px.

Sintaks:
margin: margin-top = margin-bottom | margin-right = margin-left

contoh:

.left {
margin: 15px 20px;
}

berarti, margin atas dan bawah 15px, sedangkan margin kiri dan kanan 20px;

Sintaks:
margin: margin-top | margin left = margin right | margin bottom

.left {
margin: 15px 20px 30px;
}

berarti, margin atas 15px, margin kiri dan kanan 20px, dan margin bawah
30px.