Cara Memberi Jarak Antar Elemen / Tag HTML dengan CSS ( Margin )

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 margin_css.html, lalu tambahkan kode berikut:

Cara Memberi Jarak Antar Elemen / Tag HTML dengan CSS ( Margin )

<!DOCTYPE html>
<html>
<head>
<title>Margin CSS</title>
<style>
.box{
background-color:blue;
color: white;
width:100px;
height:100px;
margin-bottom:50px; }
</style>
</head>
<body>
<div class="box">
Box satu
</div>
<div class="box">
Box Dua
</div>
</body>
</html>
Berikut adalah tampilan yang akan anda dapatkan :

Cara Memberi Jarak Antar Elemen / Tag HTML dengan CSS ( Margin )

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;

Nah Bagaimana…? apakah sekarang kamu sudah mengerti Cara Memberi Jarak Antar Elemen / Tag HTML dengan CSS? Mungkin itu saja tulisan yang membahas tentang Cara Memberi Jarak Antar Elemen / Tag HTML dengan CSS, jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.
Previous
Next Post »
Thanks for your comment