Secara sederhana, margin sanggup didefinisikan sebagai kerenggangan antara area dengan tempat luar, sedangkan padding yaitu kerenggangan antara area dengan objek di dalamnya.
Deklarasi margin dan padding sanggup dituliskan menyerupai ini:
- margin:5px;
- padding:5px;
5px yaitu teladan value dari properti margin dan padding. Selain ukuran kerenggangan dalam piksel, ukuran margin dan padding juga sanggup ditentukan dengan satuan em, pt ataupun %, meskipun sesungguhnya ada juga satuan pengukuran yang lainnya. Kamu bahkan sanggup menuliskan ukuran kerenggangan negatif menyerupai -5px, -100px, dll.
Margin dan padding sanggup dipecah menjadi empat bab menyerupai ini:
| Deklarasi | Keterangan |
|---|---|
| margin-top:5px; | Menentukan margin sebelah atas sebesar 5 piksel |
| margin-right:5px; | Menentukan margin sebelah kanan sebesar 5 piksel |
| margin-bottom:5px; | Menentukan margin sebelah bawah sebesar 5 piksel |
| margin-left:5px; | Menentukan margin sebelah kiri sebesar 5 piksel |
| padding-top:5px; | Menentukan padding sebelah atas sebesar 5 piksel |
| padding-right:5px; | Menentukan padding sebelah kanan sebesar 5 piksel |
| padding-bottom:5px; | Menentukan padding sebelah bawah sebesar 5 piksel |
| padding-left:5px; | Menentukan padding sebelah kiri sebesar 5 piksel |
Atau kau juga sanggup memakai cara yang lebih praktis, yaitu dengan menggabungkan keempat pengukuran kerenggangan yang berbeda dalam satu properti margin/padding saja menyerupai ini:
| Deklarasi | Keterangan |
|---|---|
| margin:1px 2px 3px 4px; | Margin atas: 1 piksel Margin kanan: 2 piksel Margin bawah: 3 piksel Margin kiri: 4 piksel |
| margin:1px 2px 3px; | Margin atas: 1 piksel Margin kanan dan kiri: 2 piksel Margin bawah: 3 piksel |
| margin:2px 4px; | Margin vertikal (atas dan bawah): 2 piksel Margin horizontal (kanan dan kiri): 4 piksel |
| padding:1px 2px 3px 4px; | Padding atas: 1 piksel Padding kanan: 2 piksel Padding bawah: 3 piksel Padding kiri: 4 piksel |
| padding:1px 2px 3px; | Padding atas: 1 piksel Padding kanan dan kiri: 2 piksel Padding bawah: 3 piksel |
| padding:2px 4px; | Padding vertikal (atas dan bawah): 2 piksel Padding horizontal (kanan dan kiri): 4 piksel |