Belajar CSS Part 7 - Margin pada CSS

Margin

Margin merupakan sisi luar dari sebuah elemen. Fungsi dari margin adalah untuk mengatur jarak tiap elemen.
Contoh

div {
    margin: 70px;
    border: 1px solid lightblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div>Elemen ini memiliki margin 70px di sisi atas, kanan, bawah, dan kiri.</div>

</body>
</html>

Hasilnya:

Elemen di atas memiliki margin masing-masing 70px di sisi atas, kanan, bawah, dan kiri.

Properti Margin

Properti margin digunakan untuk membuat ruang di sekitar elemen, tepatnya di luar dari setiap border yang sudah ditetapkan.

Properti margin memiliki empat sisi, yaitu:

margin-top
margin-right
margin-bottom
margin-left.

Contoh

div {
    margin-top: 70px;
    margin-right: 70px;
    margin-bottom: 70px;
    margin-left: 70px;
    border: 1px solid lightblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div>Elemen ini memiliki margin 70px di sisi atas, kanan, bawah, dan kiri elemen.</div>

</body>
</html>

Hasilnya:

Dengan menggunakan CSS margin, kita memiliki kendali penuh atas pengaturan margin. Dalam CSS, terdapat properti pengaturan margin untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).

Semua properti margin memiliki nilai (value) berikut:

auto - browser menghitung margin secara otomatis
length - menentukan batas tepi margin dalam px, pt, cm, dll
% - menentukan batas tepi margin dalam persen berdasarkan lebar blok elemen
inherit - menetapkan bahwa margin harus mengikuti elemen induknya (atau elemen sebelumnya)

Catatan: Nilai negatif juga diperbolehkan, seperti: margin: -70px;.

Dibawah ini adalah contoh untuk menetapkan ukuran margin yang berbeda pada keempat sisi elemen <p>:

Contoh

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Menerapkan margin yang berbeda ditiap sisi elemen</h2>
<div>Elemen div ini memiliki margin 100px untuk sisi atas, margin sisi kanan 150px, margin sisi bawah 100px, dan margin sisi kiri 80px.</div>

</body>
</html>

Hasilnya:

Memperingkat Pengkodean pada Margin

Untuk mempersingkat pengkodean, kita harus menentukan semua properti margin dalam satu properti.

Properti margin digunakan untuk menyingkat beberapa properti berikut:

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

Berikut adalah cara kerjanya:

Apabila properti margin memiliki empat nilai, misalnya:

margin: 25px 50px 75px 100px;

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

Catatan: Cara untuk menuliskan value margin adalah searah jarum jam, dari sisi atas, kanan, bawah, dan terakhir sisi kiri.

Contoh

div {
    border: 1px solid black;
    margin: 25px 50px 75px 100px;
    background-color: lightblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti margin 4 nilai</h2>
<div>Elemen div ini memiliki margin sisi atas 25px, margin sisi kanan 50px, margin sisi bawah 75px, dan margin sisi kiri 100px.</div>
</div>
<hr>

</body>
</html>

Hasilnya:

Apabila properti margin memiliki tiga nilai:

margin: 25px 50px 75px;

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

Contoh

div {
    border: 1px solid black;
    margin: 25px 50px 75px;
    background-color: lightblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti margin 3 nilai</h2>
<div>Elemen div ini memiliki margin sisi atas dan bawah 25px, margin sisi kiri dan kanan 50px, dan margin sisi bawah 75px.</div>
</div>
<hr>

</body>
</html>

Hasilnya:

Apabila properti margin memiliki dua nilai:

margin: 25px 50px;

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

Contoh

div {
    border: 1px solid black;
    margin: 25px 50px;
    background-color: lightblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti margin 2 nilai</h2>
Elemen div ini memiliki margin sisi atas dan bawah 25px dan margin sisi kiri dan kanan 50px.</div>

<hr>

</body>
</html>

Apabila properti margin memiliki satu nilai:

margin: 25px;

keempat margin adalah 25px

Contoh

div {
    border: 1px solid black;
    margin: 25px;
    background-color: lightblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti margin 1 nilai</h2>
Elemen div ini memiliki margin 25px untuk keempat sisinya.</div>

<hr>

</body>
</html>

Catatan: Apabila kita ingin memberikan ukuran margin yang sama pada keempat sisi, maka cukup hanya dengan menuliskan margin 1 nilai saja seperti di atas.

Value "auto"

Apabila kita mengatur properti margin ke "auto", maka elemen akan ditempatkan di tengah secara horizontal. Ruang yang tersisa di sisi kiri dan kanan elemen akan memiliki ukuran yang sama.

Contoh

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Penggunaan margin: auto</h2>
<div>
Elemen div ini berada di tengah secara horizontal karena memiliki margin: auto;
</div>

</body>
</html>

Value "inherit"

Value inherit digunakan untuk menetapkan bahwa margin harus mengikuti elemen induknya (atau elemen sebelumnya).

Contoh di bawah ini adalah margin sisi kiri pada elemen <p class="contoh1"> diwariskan dari elemen induk atau elemen sebelumnya, yaitu <div>:

Contoh

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

p.contoh1 {
    margin-left: inherit;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Penggunaan value inherit</h2>
<p>Margin sisi kiri diwariskan dari elemen induk (atau elemen sebelumnya):</p>

<div>
<p class="contoh1">Paragraf ini memiliki margin inherit di sisi kiri (mengikuti elemen div yang juga memiliki margin di sisi kiri).</p>
</div>

</body>
</html>

Pada tabel di bawah ini adalah semua properti CSS margin:

Properti	Deskripsi
margin	Sebuah properti singkatan untuk mengatur semua properti margin dalam satu deklarasi
margin-top	Menentukan margin pada sisi atas elemen
margin-right	Menentukan margin pada sisi kanan elemen
margin-bottom	Menentukan margin pada sisi bawah elemen
margin-left	Menentukan margin pada sisi kiri elemen