Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

CSS Margin dan Padding

tutorial css margin dan padding

Secara sederhana, margin dapat didefinisikan sebagai kerenggangan antara area dengan daerah luar, sedangkan padding adalah kerenggangan antara area dengan objek di dalamnya.

Deklarasi margin dan padding dapat dituliskan seperti ini:

  • margin:5px;
  • padding:5px;

5px adalah contoh value dari properti margin dan padding. Selain ukuran kerenggangan dalam piksel, ukuran margin dan padding juga dapat ditentukan dengan satuan em, pt ataupun %, meskipun sebenarnya ada juga satuan pengukuran yang lainnya. Kamu bahkan bisa menuliskan ukuran kerenggangan negatif seperti -5px, -100px, dll.

Margin dan padding dapat dipecah menjadi empat bagian seperti ini:

DeklarasiKeterangan
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 kamu juga bisa menggunakan cara yang lebih praktis, yaitu dengan menggabungkan keempat pengukuran kerenggangan yang berbeda dalam satu properti margin/padding saja seperti ini:

DeklarasiKeterangan
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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 6 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!