Margin CSS

Margin elemen ini adalah 70px.

Coba Sendiri

Margin CSS

CSS margin Properti digunakan untuk membuat ruang di luar garis batas yang diatur, untuk elemen sekitar.

Dengan CSS, Anda dapat mengendalikan margin sepenuhnya. Ada beberapa properti yang dapat digunakan untuk menetapkan margin untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).

Margin - Sisi yang terpisah

CSS memiliki properti untuk menentukan margin untuk setiap sisi elemen:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Semua properti margin eksternal dapat diset nilai berikut:

  • auto - Browser menghitung margin
  • panjang - Tentukan margin dalam satuan px, pt, cm, dll.
  • % - Menentukan margin dalam persen lebar elemen yang diikutsertakan
  • inherit - Menentukan margin yang harus diwarisi dari elemen induk

Petunjuk:Memungkinkan nilai negatif.

Contoh

Atur margin yang berbeda untuk empat sisi <p> elemen:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Coba Sendiri

Margin - Properti singkat

Untuk meminimalisir kode, semua properti margin eksternal dapat ditentukan dalam satu properti.

margin Properti adalah singkatan dari properti margin eksternal berikut:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Prinsip kerja nya seperti ini:

Jika margin Properti memiliki empat nilai:

  • margin: 25px 50px 75px 100px;
    • Margin eksternal atas adalah 25px
    • Margin eksternal kanan adalah 50px
    • Margin eksternal bawah adalah 75px
    • Margin eksternal kiri adalah 100px

Contoh

Properti singkat margin margin menetapkan empat nilai:

p {
  margin: 25px 50px 75px 100px;
}

Coba Sendiri

Jika margin Properti menetapkan tiga nilai:

  • margin: 25px 50px 75px;
    • Margin eksternal atas adalah 25px
    • Margin eksternal kiri dan kanan adalah 50px
    • Margin eksternal bawah adalah 75px

Contoh

Gunakan properti singkat margin yang telah diset tiga nilai:

p {
  margin: 25px 50px 75px;
}

Coba Sendiri

Jika margin Properti menetapkan dua nilai:

  • margin: 25px 50px;
    • Margin eksternal atas dan bawah adalah 25px
    • Margin eksternal kiri dan kanan adalah 50px

Contoh

Gunakan properti singkat margin yang telah diset dua nilai:

p {
  margin: 25px 50px;
}

Coba Sendiri

Jika margin Properti menetapkan nilai:

  • margin: 25px;
    • Seluruh empat margin eksternal adalah 25px

Contoh

Gunakan properti singkat margin untuk mengatur nilai:

p {
  margin: 25px;
}

Coba Sendiri

auto 值

Anda dapat menetapkan margin atribut untuk auto, untuk membuat elemen di tengah melintasi kontainer.

Lalu, elemen ini akan mengambil lebar yang ditentukan, dan ruang sisa akan diatur secara rata di antara batas kiri dan kanan.

Contoh

Menggunakan margin: auto:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

Coba Sendiri

Nilai inherit

Pada contoh ini, margin kiri elemen <p class="ex1"> diwarisi dari elemen induk (<div>):

Contoh

Menggunakan nilai inherit:

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}

Coba Sendiri

Bacaan Tambahan

Buku Luar:Model Bok: Margin CSS