CSS Margin

Margin digunakan untuk membuat jarak luar pada element satu dengan yang lainnya. Margin sering dipakai untuk mengatur layout website agar menjadi rapih. Ada beberapa property margin yang bisa kita gunakan, antara lain :

margin-top = Mengatur jarak luar atas

margin-right = Mengatur jarak luar kanan

margin-bottom = Mengatur jarak luar bawah

margin-left = Mengatur jarak luar kiri

Kita lihat contoh penggunaan ketika membuat 2 box pada css dengan mengatur margin (jarak luar) antara keduanya.

<!DOCTYPE html>

<html>

<head>

</head>

body{

display: flex;

}

.box-1{

width: 150px;

height: 100px;

background: #58886c;

margin-top: 20px;

margin-right: 20px;

margin-bottom: 20px;

margin-left: 20px;

}

.box-2{

width: 150px;

height: 100px;

background: #58886c;

margin-top: 20px;

margin-right: 20px;

margin-bottom: 20px;

margin-left: 20px;

}

/* box yang tidak diberi margin */

.box-3{

width: 150px;

height: 100px;

background: #58886c;

}

</style>

<body>

</body>

</html>

Silahkan kalian coba dan lihat hasilnya, tentunya ada perbedaan box yang diberi margin dengan yang tidak diberi margin. Untuk penulisan property margin juga bisa menggunakan shorthand agar kode tidak terlihat terlalu menumpuk.

shorthand margin dengan 4 value :

margin: 20px 10px 25px 15px;

shorthand diatas dapat diartikan :

margin-top: 20px;

margin-right: 10px;

margin-bottom: 25px;

margin-left: 15px;

shorthand margin dengan 3 value :

margin: 20px 25px 15px;

shorthand diatas dapat diartikan :

margin-top: 20px;

margin-right: 25px;

margin-bottom: 15px;

margin-left: 25px;

shorthand margin dengan 2 value :

margin: 20px 15px;

shorthand diatas dapat diartikan :

margin-top: 20px;

margin-right: 15px;

margin-bottom: 20px;

margin-left:15px;

shorthand margin dengan 1 value :

margin: 20px;

shorthand diatas dapat diartikan :

margin-top: 20px;

margin-right: 20px;

margin-bottom: 20px;

margin-left:20px;

Shorthand memudahkan kita untuk menuliskan sebuah kode. Silahkan mencoba...