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.
Untuk berlangganan artikel, masukan email anda disini:



10 Comment :

Kang Pie mengatakan...

Mmm... gitu yah.. thank's

awe mengatakan...

thank infonya gan

smartpulsa-88 mengatakan...

makasih Gan bagi ngilmunya

คɱin mengatakan...

mantab sob artikelnya

Anonim mengatakan...

sangat membantu, makasih yaa

m-fahrin mengatakan...

mantap gan, thank sudah share berbagi . . .

Anonim mengatakan...

ini mah...mak nyossss gan....kwkwkwkwkwk...siiiiip deh!

Copy Paste mengatakan...

thnx, bermanfaat bgt ilmunya
www.cpartikel.com

alat tulis murah mengatakan...

makasih tuk share artikelnya. membantu

Muttaqin mengatakan...

LAngsung dipraktikkan...

Posting Komentar

Bahasa dapat mencerminkan kepribadian seseorang.
Bagi yang ingin promosi web, blog dan atau mendapatkan backlink dari blog ini, telah disediakan tempat khusus. Klik DISINI

 

Info Olahraga

Info Komputer

Info Blackberry