CSS : Margin dan Padding dalam CSS

assalamualaikum wr. wb.
Postingan saya kali ini adalah tentang margin dan padding pada CSS. Langsung saja ini dia postingan saya.

A. CSS Margin
Properti CSS margin digunakan untuk menghasilkan ruang di sekitar elemen. Sifat margin 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).

Gambar diatas menunjukan margin yang mengatur ukuran ruang putih du luar border.

Margin - Individual Sides
CSS memiliki sifat menentukan margin untuk setiap sisi elemen :

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

Semua sifat margin dapat memiliki nilai berikut :

• auto - browser menghitung margin
• panjang/length - menentukan margin di px, pt, cm, dll
• % - menentukan margin dalam % dari lebar elemen yang mengandung
• mewarisi/inherit - menetapkan bahwa margin harus diwarisi dari elemen induk

Margin Individual Sides / Individu dituliskan seperti berikut :

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

Margin - Shorthand Property
Untuk mempersingkat kode, ada caranya untuk menentukan semua properti margin dalam satu properti.
Properti margin adalah properti singkatan untuk properti margin individu berikut :

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

Margin shorthand dituliskan seperti berikut :

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

Jadi, di sini adalah cara kerjanya :

1. Jika properti margin memiliki empat nilai
margin: 25px 50px 75px 100px;

• margin atas adalah 25px
• margin kanan adalah 50px
• margin bawah adalah 75px
• margin kiri adalah 100px

2. Jika properti margin memiliki tiga nilai
margin: 25px 50px 75px;

• margin atas adalah 25px
• margin kanan dan kiri adalah 50px
• margin bawah adalah 75px

3. Jika properti margin memiliki dua nilai
margin: 25px 50px;

• margin atas dan bawah yang 25px
• margin kanan dan kiri adalah 50px

4. Jika properti margin memiliki satu nilai
margin: 25px;

• keempat margin besarnya 25px

Margin Auto Value
Kita 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. Penulisannya :

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

Margin Inherit Value
Margin contoh ini memungkinkan margin kiri diwariskan dari elemen induk.
Penulisan untuk margin inherit :

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

p.one {
    margin-left: inherit;
}

Margin Collapse
Margin atas dan 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.
Lihatlah contoh berikut :

h1 {
    margin: 0 0 50px 0;
}
h2 {
    margin: 20px 0 0 0;
}

Dalam contoh di atas, elemen <h1> memiliki margin bawah 50px. Elemen <h2> memiliki margin atas yang ditetapkan sebesar 20px. Secara akal jika dihitung bahwa margin vertikal antara <h1> dan <h2> akan menjadi total 70px (50px + 20px). Namun karena margin runtuh, margin yang sebenarnya akhirnya menjadi 50px.



B. CSS Padding
Properti CSS padding yang digunakan untuk menghasilkan ruang di sekitar konten. Padding membersihkan area di sekitar konten (dalam perbatasan) dari elemen.
Dengan CSS, Anda memiliki kontrol penuh atas padding. Ada properti CSS untuk pengaturan padding untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).

Gambar diatas menunjukan padding yang mengatur ukuran di dalam konten.

Padding - Individual Sides
CSS memiliki sifat menentukan padding untuk setiap sisi elemen, yaitu :

• padding-top
• padding-right
• padding-bottom
• padding-left

Hampir sama dengan margin, padding juga dapat memiliki nilai berikut :

• panjang/length - menetapkan padding di px, pt, cm, dll
• % - Menentukan bantalan di% dari lebar elemen yang mengandung
• mewarisi/inherit - menetapkan bahwa padding harus diwarisi dari elemen induk

Contoh berikut menetapkan bantalan yang berbeda untuk semua empat sisi dari elemen <p> ​​:

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

Padding - Shorthand Property
Untuk mempersingkat kode, semua properti padding dapat ditentukan dari satu properti.
Properti padding adalah properti singkatan untuk padding individu berikut :

• padding-top
• padding-right
• padding-bottom
• padding-left

Penulisannya adalah seperti berikut :

p {
    padding: 50px 30px 50px 80px;
}

Jadi, di sini adalah cara kerjanya:

1. Jika properti padding memiliki empat nilai > padding: 25px 50px 75px 100px;
Penjabarannya adalah :

• Padding atas adalah 25px
• Padding tepat adalah 50px
• Padding bawah adalah 75px
• Padding kiri 100px

2. Jika properti padding memiliki tiga nilai > padding: 25px 50px 75px;
Penjabarannya adalah :

• Padding atas adalah 25px
• Padding kanan dan kiri adalah 50px
• Padding bawah adalah 75px

3. Jika properti padding memiliki dua nilai > padding: 25px 50px;
Maksudnya adalah :

• padding atas dan bawah yang 25px
• padding kanan dan kiri adalah 50px

4. Jika properti padding memiliki satu nilai > padding: 25px;
Penjabarannya adalah : keempat paddings adalah 25px


Sekian postingan saya kali ini tentang margin dan padding pada CSS, sekian dan terimakasih.
wassalamualaikum wr. wb.

Referensi :
- http://www.w3schools.com/css/css_margin.asp
- http://www.w3schools.com/css/css_padding.asp