Mengenal Margin dan Padding pada HTML

Mengenal Margin dan Padding pada HTML - Hallo sobat, anda pusing dengan masalah margin dan padding pada kode-kode HTML? Sama, saya pun demikian. Saat utak-atik template, bagian inilah yang sering memusingkan saya. Perlu dicoba berulang-ulang untuk menentukan nilai/value margin dan padding ini agar jarak antar konten bisa pas sesuai yang kita inginkan. Demikian yang saya rasakan dan jika sobat punya tips, sy berharap anda bisa berbagi di sini.

Untuk mengurangi rasa pusing, sengaja sy tulis artikel ini untuk menjadi dasar acuan saat memodifikasi template sekaligus agar tidak lupa bila diperlukan.

Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border
Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam 
Border : Adalah garis tepi dari komponen

• MARGIN

Kode HTML untuk margin biasanya ditulis seperti ini:

margin:1px 2px 3px 4px;

Kode tersebut dibaca sebagai berikut:

1. Margin atas 1px.
2. Margin kanan 2px.
3. Margin bawah 3px.
4. Margin kiri 4px.

Apabila dipisah, penulisannya menjadi:

margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;

• PADDING

Kode HTMLnya adalah sebagai berikut ;

padding:5px 6px 7px 8px;

Arti dari kode di atas yaitu ;

1. Padding atas 5px.
2. Padding kanan 6px.
3. Padding bawah 7px.
4. Padding kiri 8px.

Apabila dipisah, penulisannya menjadi:

padding-top:5px;
padding-right:5px;
padding-bottom:5px;
padding-left:5px;

Untuk diingat:
Penulisan margin dan padding di atas bisa dibaca melingkar searah perputaran jarum jam, dari atas, kanan, bawah, dan kiri.