Perbedaan Antara Margin, Border, Padding, Dan Content

Viyan Pradita Rabu, September 01, 2010

Awalnya saya masih bingung membedakan antara Margin, Border, Padding, Dan Content, Sebenarnya itu merupakan hal yang tidak begitu sukar untuk dipecahkan, asalkan kita mau mempelajarinya. Persoalan klasik namun masih banyak yang mendapat problem disesi ini. saya sendiri contohnya.. hehe..
Nah, maka dari itu, Mari kita ulas lagi tentang apa itu Margin, Border, Padding, Dan Content.

Coba perhatikan gambar dibawah ini


Sedikait Ulasan tentang gambar di atas :
  1. Margin = Menghapus sebuah daerah di sekitar perbatasan. Margin yang tidak memiliki warna latar belakang, dan benar-benar transparan.
  2. Border = Sebuah perbatasan yang terletak di sekitar padding dan konten. perbatasan ini dipengaruhi oleh warna latar belakang kotak (dapat diberi warna)
  3. Padding = Menghapus sebuah daerah di sekitar konten (terletak antara border dan konten). padding ini dipengaruhi oleh warna latar belakang kotak.
  4. Content = Isi kotak, di mana teks dan gambar muncul

Dalam penulisan code untuk menentukan bagian per bagain terdiri dari dua cara yaitu:

1. margin: 2px 2px 5px 0px; urutannya –> Atas, kanan, bawah, kiri

2. margin-top: 2px; margin-right: 2px; margin-bottom: 5px; margin-left: 0px;

demikian juga halnya dengan padding bila di tulis bagian per bagain.

Mungkin sekian saja dari saya, selamjutnya sobat pasti lebih tahu. hehee
Semoga bermanfaat.


Ditulis Oleh :

Artikel Perbedaan Antara Margin, Border, Padding, Dan Content ini dipublish pada hari: Rabu, September 01, 2010. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

Tidak ada komentar:

Poskan Komentar

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>

web design blogs Bloggers - Meet Millions of Bloggers