框模型：CSS 外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

Sifat margin CSS

设置外边距的最简单方法就是使用 margin 属性。

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。

margin 可以设置为 auto。更常见的做法是为外边距设置长度值。以下声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：

h1 {margin : 0.25in;}

以下例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：

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

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

margin: top right bottom left

Selain itu, anda dapat menetapkan margin dengan nilai persen:

p {margin : 10%;}

Persen adalah berdasarkan width dari elemen induk. Contoh di atas menetapkan margin untuk elemen p sebanyak 10% dari width elemen induk.

Nilai default margin adalah 0, jadi jika tidak ada nilai yang dideklarasikan untuk margin, margin tidak akan muncul. Tetapi, dalam praktiknya, browser sudah menyediakan gaya yang predeteksi untuk banyak elemen, termasuk margin. Contohnya, di browser yang mendukung CSS, margin akan menghasilkan 'garis kosong' di atas dan bawah setiap elemen paragraf. Jadi, jika tidak ada margin yang dideklarasikan untuk elemen p, browser mungkin akan menerapkan margin sendiri. Tentu saja, jika anda mengklarasikan dengan spesifik, gaya default akan diubah.

Penggantian nilai

Ingatkah? Kita pernah menyebutkan tentang penggantian nilai di bab sebelumnya. Di sini, kita akan menjelaskan bagaimana cara menggantikan nilai.

Kadang-kadang, kami akan memasukkan beberapa nilai yang berulang:

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

Dengan penggantian 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 mendefinisikan beberapa aturan yang memungkinkan untuk menentukan margin dengan lebih sedikit daripada 4 nilai. Aturan seperti berikut:

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

Gambar di bawah ini menyediakan cara yang lebih visi untuk memahami hal ini:

Salinan nilai CSS

Artinya, jika 3 nilai di tentukan untuk margin, nilai ke-4 (yaitu margin kiri) akan disalin dari nilai ke-2 (margin kanan). Jika diberikan 2 nilai, nilai ke-4 akan disalin dari nilai ke-2, nilai ke-3 (margin bawah) akan disalin dari nilai ke-1 (margin atas). Dalam kasus terakhir, jika hanya diberikan 1 nilai, 3 margin lainnya akan disalin dari nilai ini (margin atas).

Dengan mekanisme yang sederhana ini, anda hanya perlu menentukan nilai yang diperlukan, tanpa harus mengapply 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;}			/* Setara dengan 1px 1px 1px 1px */

Kaedah ini mempunyai kelemahan kecil, anda pasti akan menghadapi masalah ini. Jika anda mahu menetapkan luaran atas dan luaran kiri bagi elemen p adalah 20 piksel, luaran bawah dan luaran kanan adalah 30 piksel. Dalam keadaan ini, ia harus ditulis:

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

Dengan cara ini, anda boleh mendapatkan hasil yang diinginkan. Ketinggalan, dalam keadaan ini, jumlah nilai yang diperlukan tidak dapat disingkatkan.

Lihat contoh lain. Jika anda mahu kecuali luaran kiri, semua luaran lain adalah auto (luaran kiri adalah 20px):

p {margin: auto auto auto 20px;}

Tentu, dengan cara ini, anda boleh mendapatkan kesan yang diinginkan. Masalahnya, mengecek auto ini cukup sukar. Jika anda hanya mahu mengawal luaran tunggal bagi sisi elemen, gunakan properti luaran tunggal.

Properti luaran tunggal

Anda boleh menggunakan properti luaran tunggal untuk menetapkan nilai luaran bagi sisi tunggal bagi elemen. Jika anda mahu menetapkan luaran kiri bagi elemen p adalah 20px. Tidak perlu menggunakan margin (perlu mengecek banyak auto), tetapi boleh mengambil kaedah berikut:

p {margin-left: 20px;}

Anda boleh menggunakan mana-mana properti berikut untuk hanya menetapkan luaran atas bagi sisi yang disediakan, tanpa mempengaruhi luaran sisi lain:

Sebuah atur dapat menggunakan beberapa properti luaran tunggal seperti ini, contohnya:

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

Tentu, untuk keadaan ini, penggunaan margin mungkin lebih mudah:

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

Beberapa sisi, mana pun digunakan properti luaran tunggal atau margin, hasilnya sama. Biasanya, jika anda mahu menata luaran beberapa sisi, penggunaan margin akan lebih mudah. Walaupun daripada sudut pandang paparan dokumen, sebenarnya mana-mana kaedah yang digunakan adalah yang penting, jadi pilih kaedah yang mudah bagi anda sendiri.

Pesan dan Komentar

Pesan:Netscape dan IE mensetengahkan nilai luaran baku (margin) bagi tanda body adalah 8px. Manakala Opera bukan seperti itu. Sebaliknya, Opera mensetengahkan nilai baku pengisian dalaman (padding) adalah 8px, jadi jika anda mahu mengatur bagian pinggiran keseluruhan laman web dan memaparkan dengan betul di Opera, anda mesti mengatur padding bagi body secara khusus.

Contoh luaran CSS:

Tetapkan jarak luar kiri teks
Contoh ini memperlihatkan bagaimana dapat ditetapkan margen kiri teks.
Tetapkan margen kanan teks
Contoh ini memperlihatkan bagaimana dapat ditetapkan margen kanan teks.
Tetapkan margen atas teks
Contoh ini memperlihatkan bagaimana dapat ditetapkan margen atas teks.
Tetapkan margen bawah teks
Contoh ini memperlihatkan bagaimana dapat ditetapkan margen bawah teks.
Semua atribut margen luar dalam satu pernyataan.
Contoh ini memperlihatkan bagaimana semua atribut margen luar dapat ditetapkan dalam satu pernyataan.

Atribut Margen Luar CSS

Atribut Deskripsi
margin Atribut singkat. Tetapkan semua atribut margen luar dalam satu pernyataan.
margin-bottom Tetapkan margen luar bawah elemen.
margin-left Tetapkan margen luar kiri elemen.
margin-right Tetapkan margen luar kanan elemen.
margin-top Tetapkan margen luar atas elemen.