Hendry Muda Rangkuti: Margin Pada HTML & CSS

Margin Pada HTML & CSS

Selamat pagi,
Setelah beberapa hari tidak nge-post kali ini saya akan melanjutkannya, langsung saja disimak dibawah ini.

Property margin digunakan untuk memberikan jarak antar elemen/tag HTML. Misalnya jarak antar <div> dan tag-tag HTML lainnya.

Sebagai contoh, buatlah file HTML baru dengan nama latihan8.html, lalu tambahkan kode berikut :

<div class="box">
Box ke satu
</div>

<div class="box">
Box ke dua
</div>

Catatan : Ingat, tambahkan kode tersebut pada struktur HTML standar yang memiliki <!DOCTYPE HTML>, <HTML>, <HEAD> dan seterusnya.

Lalu tambahkan tag style dalam tag head, dan ketikkan kod CSS berikut :

Berikut adalah tampilan yang akan anda dapatkan :

Jarak antar box ke satu dan box ke dua sedikit berjauhan, karena kita menambahkan margin bawah (margin-bottom) sebesar 50px.

Untuk melihat perbedaan ketika kita memberikan margin atau tidak, anda dapat menghapus property margin-bottom dan perhatikan perbedaannya.

Anda juga dapat memberikan jarak dari kanan (right), kiri (left), dan atas (top). Misalnya :

margin-top : 20px;
margin-right: 30px;
margin-bottom: 50px;
margin-left: 40px;