Margin

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 35 dari 76.

Dalam CSS, margin adalah ruang di sekitar elemen, di luar batas yang ditentukan. Margin merupakan bagian penting lainnya dari model kotak. Margin digunakan untuk membuat jarak antar elemen dan memisahkannya satu sama lain.

Kamu dapat mengatur margin pada keempat sisi elemen (atas, kanan, bawah, dan kiri) secara terpisah atau menggunakan notasi singkat.

Berikut sintaks dasar untuk menggunakan property margin:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

margin-top: Margin di sisi atas elemen.
margin-right: Margin di sisi kanan elemen.
margin-bottom: Margin di sisi bawah elemen.

margin-left: Margin di sisi kiri elemen.
value: Nilai margin yang diinginkan, yang dapat ditentukan dalam piksel (px), em (em), persentase (%), atau satuan CSS valid lainnya.

Kamu juga bisa menggunakan notasi singkat untuk mengatur margin keempat sisi sekaligus, misalnya:

p {
    margin: 20px; /* Menerapkan margin yang sama pada keempat sisi */
}

div {
    margin: 10px 25px; /* Mengatur margin atas dan bawah menjadi 10px, serta margin kiri dan kanan menjadi 25px */
}

.button {
    margin: 15px 30px 10px 5px;/* Mengatur margin setiap sisi secara terpisah */
}

Dalam contoh ini, semua elemen <p> memiliki margin sebesar 20px di semua sisi, semua elemen <div> memiliki margin atas dan bawah sebesar 10px serta margin kiri dan kanan sebesar 25px, dan semua elemen dengan class button memiliki margin atas sebesar 15px, margin kanan sebesar 30px, margin bawah sebesar 10px, dan margin kiri sebesar 5px.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan sebuah heading (<h1>) dan sebuah divisi (<div>). Tugasmu adalah menggunakan properti margin untuk menambahkan ruang di sekitar elemen-elemen ini. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <h1>. Atur margin menjadi 20px di semua sisi.
Tulis aturan CSS yang menargetkan elemen <div>. Atur margin atas dan bawah menjadi 10px, serta margin kiri dan kanan menjadi 30px.

Coba sendiri

<html>
<head>
    <title>Margins</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">Mastering CSS Margins</h1>
    <div style="border:2px solid black;">Margins create space around elements.</div>
</body>
</html>