CSS Part 7 : CSS Margin

Assalamu alaikum Wr Wb.

Dalam pertemuan kali ini, saya akan memaparkan mengenai CSS MArgin.

Margin CSS

CSS margin properti yang digunakan untuk menghasilkan ruang di sekitar elemen. Tag margin sifat mengatur ukuran ruang putih di luar perbatasan. Dengan CSS, Anda memiliki kontrol penuh atas margin. Ada properti CSS untuk pengaturan margin untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).

Margin - Individual Sides

CSS memiliki sifat untuk menentukan margin untuk setiap sisi elemen:

• margin-top

• margon-right

• margin-bottom

• margin-left

Semua sifat margin dapat memiliki nilai berikut:

• auto-browser menghitung margin

• panjang-menentukan margin di px, pt, cm, dll.

• %-Menentukan margin dalam % dari lebar elemen yang mengandung

• mewarisi- menetapkan bahwa margin harus diwarisi dari elemen induk.

 

Tip : Nilai negatif diperbolehkan.

Contoh berikut menetapkan margin yang berbeda untuk semua sisi dari <p> elemen.

Contoh

p{

margin-top: 100px;

margin-bottom: 100px;

margin-right: 150px;

margin-left: 80 px;

}

Margin - Properti Steno

Untuk mempersingkat kode, adalah mungkin untuk menentukan semua properti margin dalam satu properti. Tag margin properti adalah properti singkatan untuk properti margin individu berikut.

• margin-top

• margin-right

margin-bottom

margin-left

Contoh

p{

margin: 100px 150px 100px 80px;

}

Jadi, di sini adalah cara kerjanya :

Jika margin properti memiliki empat nilai:

• margin: 25px 50px 75px 100px;

1. margin atas adalah 25px
2. margin kanan adalah 50px
3. margin bawah adalah 75px

Jika margin properti memiliki dua nilai:

• margin: 25px 50px;

1. margin atas dan bawah yang 25px
2. margin kanan dan kiri adalah 50px

Jika margin properti memiliki satu nilai:

• margin: 25px;

1.  keempat margin 25px

Tag Auto Nilai

Anda dapat mengatur properti margin auto untuk horizontal pusat elemen dalam wadah. Unsur kemudian akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi sama antara margin kiri dan kanan.

Contoh

div{

width: 300px;

margin: auto;

border: 1px solid red;

}

Mewarisi Nilai

Contoh ini memungkinkan margin kiri diwariskan dari elemen induk.

Contoh

div.container{

border: 1px solid red;

margin-left: 100px; 

}

p.one{

margin-left: inherit;

}

Margin Collapse

Margin atas bawah dari elemen kadang-kadang runtuh ke margin tunggal yang sama dengan yang terbesar dari dua margin. Hal ini tidak terjadi pada margin kiri dan kanan! Hanya margin atas dan bawah!

Contoh

h1{

margin: 0 0 50px 0;

}

h1{

margin: 20px 0 0 0;

}

Dalam contoh di atas, <h1> elemen memiliki margin bawah 50px. Tag<h2> elemen memiliki margin atas ditetapkan untuk 20px.

REFERENSI
http://www.w3schools.com/css/css_margin.asp