Belajar CSS Part 5 - Margin

Assalamu'alaikum Warohmatullaahi Wabarokaatuh.

Dalam Seri Belajar CSS kali ini kita akan mempelajari tentang penggunaan Margin. Margin merupakan properti yang mengatur jarak antar elemen. Margin berwarna transparan dan tidak bisa diberi warna oleh kita.

A. PENDEFINISIAN SETIAP SISI SECARA TERPISAH

Seperti halnya Border, Margin juga bisa didefinisikan secara terpisah untuk masing-masing sisi atas, kanan, bawah, dan kiri. Untuk mempelajari penggunaannya pada border bisa Anda baca di Belajar CSS Part 4 - Border. Properti yang digunakan untuk masing-masing sisi adalah sebagai berikut :

• margin-top - sisi atas
• margin-right - sisi kanan
• margin-bottom - sisi bawah
• margin-left - sisi kiri

Value yang bisa digunakan untuk properti margin adalah :

• auto : margin akan ditentukan otomatis oleh browser.
• Menspesifikasikan margin dengan ukuran panjang (px, cm, in, dsb)
• % : menspesifikasikan margin dalam ukuran persentase dari elemen.
• inherit : dengan value ini, margin akan mengikuti elemen induknya.

Contoh :

p {
    margin-top: 100px;
    margin-bottom: 80px;
    margin-right: inherit;
    margin-left: 20%;
}

Penjelasan :

• Margin atas paragraf diberi value 100 pixel
• Margin bawah paragraf diberi value 80 pixel
• Margin kanan paragraf diberi value yang sama dengan elemen induk dari paragraf.
• Margin kiri paragraf diberi value 20 persen dari lebar elemen.

Coba sendiri di sini

B. SHORTHAND PROPERTY

Seperti halnya border, margin juga bisa menggunakan metode shorthand property untuk meringkas penulisan script. Contoh penggunaannya adalah sebagai berikut :

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

Penjelasan :

• Margin atas paragraf diberi value 100 pixel
• Margin kanan paragraf diberi value 100 pixel
• Margin bawah paragraf diberi value 150 pixel.
• Margin kiri paragraf diberi value 80 pixel.

Coba sendiri di sini

C. MENGGUNAKAN AUTO VALUE Dengan menggunakan auto value, margin kiri dan kanan akan secara otomatis menyesuaikan sehingga elemen yang diatur akan tepat berada di tengah dari elemen induknya. Contoh :

div {
    width: 300px;

    margin: auto;
}

Penjelasan :

• Dengan pendefinisian di atas, elemen div akan tepat berada di tengah.

Coba sendiri di sini


Demikian Seri Belajar CSS tentang Margin, semoga bermanfaat. Terima kasih dan wassalamu'alaikum warohmatullaahi wabarokaatuh.