Perbedaan Margin , Padding (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;

Posted in Pemograman Web

komentar

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

calender lalu
April 2013
T W T F S S M
« Mar    
 1
2345678
9101112131415
16171819202122
23242526272829
30  

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

Information
081-917- 166-???
Lunch: 11am - 2pm
Dinner: M-Th 5pm - 11pm, Fri-Sat:5pm - 1am
%d bloggers like this: