Contoh CSS Margin dan Margin Shorthand Property

# CSS Margins

CSS margin mengatur ukuran ruang DI LUAR perbatasan. 

Catatan : Margin sepenuhnya transparan - dan tidak dapat memiliki warna latar belakang!

Dengan CSS, Anda memiliki kendali penuh atas margin. Ada properti CSS untuk mengatur margin untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).

# Margin untuk tiap tiap sisi

CSS memiliki properti untuk menentukan margin untuk setiap sisi elemen :

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

Semua properti margin dapat memiliki nilai berikut :

• auto - browser otomatis menghitung margin
• length - menentukan margin dalam px, pt, cm, dll.
• % - menentukan margin dalam "%" dari lebar elemen
• inherit - menetapkan bahwa margin harus diwarisi dari elemen induk

Catatan : Dimungkinkan juga untuk menggunakan nilai negatif untuk margin; untuk tumpang tindih konten.

Contoh berikut menetapkan margin yang berbeda untuk keempat sisi elemen <p> :

Example :

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

Contoh berikut memungkinkan margin kiri inherited dari elemen induk :

Example :

div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}

# Margin Shorthand Property

Untuk mempersingkat kode, dimungkinkan untuk menentukan semua margin dalam satu properti.
Margin Shorthand Property adalah properti singkatan untuk margin individual berikut :

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

Example :

p {
    margin: 100px 150px 100px 80px;
}

Jadi, inilah cara kerjanya :

Jika properti margin memiliki empat nilai :

margin: 25px 50px 75px 100px;

• top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px

Jika margin memiliki tiga nilai :

margin: 25px 50px 75px;

• top margin is 25px
• right and left margins are 50px
• bottom margin is 75px

Jika margin memiliki dua nilai :

margin: 25px 50px;

• top and bottom margins are 25px
• right and left margins are 50px

Jika margin memiliki satu nilai :

margin: 25px;

• all four margins are 25px

# Penggunaan Nilai Otomatis

Anda dapat mengatur margin ke otomatis untuk horizontally center atau mengenengahkan secara mendatar di dalam container.

Elemen kemudian akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi rata antara margin kiri dan kanan :

Example :

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