CSS Border Padding dan Margin


Assalammualaikum temen2 semua, maaf sudah beberapa hari ini saya jarang update, karena dalam masa lebaran biasa banyak kegiatan dari banyak tamu yang silaturahmi sampai jalan-jalan sama temen, maklum lah lebaran. Alhamdulillah libur sudah usai jadi balik lagi beraktifitas. Kali ini saya akan memposting beberapa pertanyaan yang sudah saya terima dari temen-temen blogger maupun mahasiswa yang bertanya tentang seputar CSS khususnya pada pembahasan CSS Border, padding dan margin. Oke langsung saja kita belajar bersama mudah2an bermanfaat bagi kita semua.....

Pengertian dari CSS Border, padding dan margin itu adalah:

# Border : Merupakan garis tepi dari komponen
# Margin : merupakan ukuran jarak bagian luar atau ukuran jarak sesudah border
# Padding : Menentukan jarak komponen body content ke border atau ukuran jarak bagian dalam

Cara penulisan dan penggunaan Kode CSS
# Border di tulis dengan CSS
border:1px dotted #000000; : artinya ukuran tebal border, style border dan warna border
atau anda bisa menuliskannya seperti ini:
border-width:1px; : adalah nilai tebal border
border-style:dotted; : adalah jenis border dan bisa anda ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainnya
atau anda bisa menuliskannya seperti ini:
border-color:#FFFFFF; : adalah warna border dan anda bisa mengganti warnanya

# Margin di tulis dengan CSS

margin:5px 5px 5px 5px; : urutan nilai angka untuk atas, kanan, bawah dan kiri
atau anda bisa menuliskannya seperti ini:
margin-left:5px; : untuk pengaturan margin bagian kiri
margin-right:5px; : untuk pengaturan margin bagian kanan
margin-top:5px; : untuk pengaturan margian bagian atas
margin-bottom:5px; : untuk pengaturan margin bagian bawah

Pada kode CSS tersebut, satuan yang digunakan adalah pixel disingkat dengan "px" yang bisa anda ganti dengan satuan lain.

# Padding ditulis dengan CSS

padding:5x 5px 5px 5px; : urutan nilai angka atas, kanan, bawah dan kiri
atau anda bisa menuliskannya seperti ini:
padding-left:5px; : untuk pengaturan padding bagian kiri
padding-right:5px; : untuk pengaturan padding kanan
padding-top:5px; : untuk pengaturan padding atas
padding-bottom:5px; : untuk pengaturan padding bawah

pada kode CSS tersebut, satuan yang digunakan adalah pixel disingkat dengan "px" yang bisa anda ganti dengan satuan lain.

Satuan dalam CSS

1. Statik

in = satuan inchi
cm = satuan centimeter
mm = satuan milimeter
pt = satuan point (1 point = 1/72 inchi)
pc = satuan pica (1 pica = 12 point)
px = satuan pixel (satu titik gambar terkecil dalam layar monitor)

2. Relatif

% = satuan persen
em atau ems = 1em = ukuran font yang tengah ada dalam elemen
ex - 1ex = x-height suatu font (x-height biasanya setengah ukuran font)


Artikel Menarik Lainnya :



8 comments:

ME on 8 September 2011 at 11:59 said...

terimaksih...sangat bermanfaat

Muryan Awaludin on 8 September 2011 at 12:52 said...

@Shop on line : ya sama2 ya..thanks udah komentar, ditunggu kritik dan sarannya...

Anonymous said...

sebaiknya di sertain dengan contohnya gan,,

masih gak ngerti ne dengan penjelasanya..


ane cuma minta bayakin torial photoshop ja gan.. ane cuma bisa itu gan..???

kalau corel, ane juga masih gak ngerti

Muryan Awaludin on 9 September 2011 at 06:02 said...

@Bangjal Dua Tiga :hehehee thanks komentar dan kritiknya gan, tapi artikel diatas memang sengaja hanya materi ( pesenan dari mahasiswa saya ), untuk contohnya pada artikel yang lainnnya gan ( artikel yang terkait diatas ).
Untuk tutorial Photoshop Insya Allah tunggu aja gan, saya posting buat yang request dulu....tengkyu dah berkunjung dan berkomantar..ditunggu kritik dan sarannya terus...^_^

baretacorps on 3 November 2011 at 20:31 said...

thnks infonya lumayan di mengerti .kasih gambarnya jg ya biar gak jenuh belajarnya.... keep blog

Syafri waldi on 5 November 2011 at 18:22 said...

mas..,saya mau nanya..kenapa wktu kita menulis dg horizontal type tool,satuan size font-nya pt...saya mauny jadi px..agar sama dengan tutorial yg saya dapat.gimana cara mngubah satuannya jdi px..mohon bantuannya mas..makasih..

Muryan Awaludin on 8 November 2011 at 08:46 said...

Sapri waldi : kalau di CSS tinggal ganti saja mas alias manual...

Muryan Awaludin on 8 November 2011 at 08:49 said...

Bareta : Ok..thanks ya sob, komentar dan sarannya...

Post a Comment

Please Your Comment

Entri Populer

Kontak Saya

HP/WA : 08562616116

Total Pageviews

Teman-Teman Blogger

Ilmu Desain Grafis Copyright © 2009 Community is Designed by Bie | development by Muryan Awaludin