Model kotak: Margin CSS

Area kosong yang mengelilingi garis batas elemen adalah margin. Menetapkan margin akan membuat area kosong ekstra di luar elemen.

Cara paling sederhana untuk menetapkan margin adalah menggunakan atribut margin, yang menerima semua unit panjang, nilai persen, bahkan nilai negatif.

Atribut margin CSS

Cara paling sederhana untuk menetapkan margin adalah Atribut margin.

Atribut margin menerima semua unit panjang, seperti pixel, inci, milimeter, atau em.

Margin dapat diatur menjadi auto. Cara yang lebih biasa adalah menetapkan nilai panjang untuk margin. Dengan pernyataan di bawah ini, margin di seluruh sisi elemen h1 disetel menjadi 1/4 inci lebar:

h1 {margin : 0.25in;}

Contoh di bawah ini menentukan margin empat sisi elemen h1 dengan unit panjang pixel (px):

h1 {margin : 10px 0px 15px 5px;}

Dengan pengaturan yang sama seperti padding, urutan nilai ini dimulai dari marjin atas (top) dan berputar mengelilingi elemen searah jarum jam:

margin: top right bottom left

Selain itu, Anda dapat menetapkan nilai persentase untuk marjin:

p {margin : 10%;}

Persentase adalah relatif terhadap width dari elemen induk. Dalam contoh di atas, marjin untuk elemen p adalah 10% dari width elemen induk.

Nilai default margin adalah 0, jadi jika nilai margin belum dideklarasikan, maka marjin tidak akan muncul. Tetapi, dalam prakteknya, peramban sudah menyediakan gaya yang predeteksi untuk banyak elemen, termasuk marjin. Contohnya, di peramban yang mendukung CSS, marjin akan membuat 'baris kosong' di atas dan bawah setiap elemen paragraf. Jadi, jika marjin untuk elemen p belum dideklarasikan, peramban mungkin akan menerapkan marjin sendiri. Tapi, tentu saja, jika Anda menyetujui deklarasi khusus, gaya default akan diganti.

Penyalinan nilai

Ingatkah? Kita pernah menyebutkan tentang penyalinan nilai di bagian pertama dan kedua. Sekarang, kita akan menjelaskan bagaimana cara memakai penyalinan nilai.

Kadang-kadang, kita akan memasukkan beberapa nilai yang berulang-ulang:

p {margin: 0.5em 1em 0.5em 1em;}

Dengan cara penyalinan nilai, Anda tidak perlu mengetik kembali pasangan angka ini. Aturan di atas sama dengan aturan di bawah:

p {margin: 0.5em 1em;}

2 nilai ini dapat menggantikan 4 nilai sebelumnya. Bagaimana hal ini dilakukan? CSS menentukan beberapa aturan yang memungkinkan untuk menentukan marjin dengan lebih sedikit daripada 4 nilai. Aturan seperti berikut:

  • Jika nilai marjin kiri hilang, gunakan nilai marjin kanan.
  • Jika nilai marjin bawah hilang, gunakan nilai marjin atas.
  • Jika nilai marjin kanan hilang, gunakan nilai marjin atas.

Gambar di bawah ini menawarkan cara yang lebih intuitif untuk memahami hal ini:

Salin Nilai CSS

Secara lain, jika 3 nilai diberikan untuk marjin, nilai ke-4 (yaitu marjin kiri) akan disalin dari nilai ke-2 (marjin kanan). Jika 2 nilai diberikan, nilai ke-4 akan disalin dari nilai ke-2, nilai ke-3 (marjin bawah) akan disalin dari nilai ke-1 (marjin atas). Dalam kasus terakhir, jika hanya satu nilai diberikan, maka 3 marjin lainnya akan disalin dari nilai ini (marjin atas).

Dengan mekanisme yang sangat sederhana ini, Anda hanya perlu menentukan nilai yang diperlukan, tanpa harus mengapply seluruh 4 nilai, seperti contoh:

h1 {margin: 0.25em 1em 0.5em;}	/* Sama dengan 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}		/* Sama dengan 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* Sama dengan 1px 1px 1px 1px */

Metode ini memiliki kekurangan kecil, Anda pasti akan menghadapi masalah ini. Dengan asumsi Anda ingin menetapkan margin atas dan kiri elemen p adalah 20 piksel, margin bawah dan kanan adalah 30 piksel. Dalam situasi ini, harus ditulis:

p {margin: 20px 30px 30px 20px;}

Dengan demikian, Anda akan mendapatkan hasil yang diinginkan. Sayangnya, dalam situasi ini, jumlah nilai yang diperlukan tidak dapat lebih sedikit.

Lihat contoh lainnya. Jika Anda ingin seluruh margin kecuali margin kiri adalah auto (margin kiri adalah 20px):

p {margin: auto auto auto 20px;}

Dengan demikian, Anda akan mendapatkan efek yang diinginkan. Masalahnya, mengetik auto ini cukup berat. Jika Anda hanya ingin mengendalikan margin sisi tunggal elemen, gunakan atribut margin sisi tunggal.

Atribut margin sisi tunggal

Anda dapat menggunakan atribut margin sisi tunggal untuk menetapkan nilai margin untuk sisi tunggal elemen. Dengan asumsi Anda ingin menetapkan margin kiri elemen p adalah 20px. Tidak perlu menggunakan margin (membutuhkan pengetikan banyak auto), melainkan dapat menggunakan metode berikut:

p {margin-left: 20px;}

Anda dapat menggunakan salah satu atribut berikut untuk mengatur margin atas saja tanpa mempengaruhi margin lainnya:

Bisa digunakan beberapa atribut sisi tunggal dalam aturan yang sama, contohnya:

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

Tentu saja, untuk situasi ini, menggunakan margin mungkin lebih mudah:

p {margin: 20px 30px 30px 20px;}

Tidak kira penggunaan atribut sisi tunggal atau margin, hasilnya sama. Biasanya, jika Anda ingin mengatur margin untuk beberapa sisi, menggunakan margin akan lebih mudah. Namun, dari sudut pandang pertunjukan dokumen, sebenarnya tidak penting cara yang digunakan, jadi pilihlah cara yang lebih mudah untuk Anda.

Petunjuk dan catatan

Petunjuk:Netscape dan IE menetapkan nilai margin default untuk tag body adalah 8px. Tapi Opera tidak seperti itu. Sebaliknya, Opera menetapkan nilai default internal padding (padding) adalah 8px, jadi jika Anda ingin mengatur bagian pinggir situs web Anda dan menampilkannya dengan benar di Opera, maka Anda harus menyesuaikan padding body.

Contoh luar margin CSS:

Atur jarak eksternal kiri teks
Contoh ini menunjukkan bagaimana mengatur sisi luar kiri teks.
Atur sisi luar kanan teks
Contoh ini menunjukkan bagaimana mengatur sisi luar kanan teks.
Atur sisi luar atas teks
Contoh ini menunjukkan bagaimana mengatur sisi luar atas teks.
Atur sisi luar bawah teks
Contoh ini menunjukkan bagaimana mengatur sisi luar bawah teks.
Semua atribut sisi luar dalam satu deklarasi.
Contoh ini menunjukkan bagaimana mengatur semua atribut sisi luar dalam satu deklarasi.

Atribut Sisi Luar CSS

Atribut Deskripsi
margin Atribut singkat. Dengan satu deklarasi atur semua atribut sisi luar.
margin-bottom Atur sisi luar bawah elemen.
margin-left Atur sisi luar kiri elemen.
margin-right Atur sisi luar kanan elemen.
margin-top Atur sisi luar atas elemen.