Tutorial Belajar Margin di HTML

Kita dapat mengatur jarak antar elemen, dan jarak elemen dari sisi-sisi elemen induknya, dengan menggunakan property margin.

<div style="margin:10px;">Contoh teks</div>

Contoh kode di atas akan menampilkan elemen <div> yang mengambil jarak sebesar 10px di atas, kanan, bawah dan kirinya.

Sama seperti property padding, property margin juga dapat diisi dengan satu hingga 4 nilai untuk mengatur ukuran margin tiap sisi-sisinya.

Selain itu kita juga dapat mengatur margin di sisi tertentu dengan menggunakan property margin-top, margin-right, margin-bottom dan margin-left.

PRAKTEK

Pada editor terdapat elemen heading dan tiga buah elemen <div>, satu diantaranya berada di dalam elemen <div> pertama. Jalankan kode dan perhatikan bagaimana tampilannya.

Set margin bawah untuk elemen <div> pertama sebesar 10px, sehingga antara elemen pertama dengan elemen di bawahnya terdapat jarak.


<div style="border:1px solid blue; margin-bottom:10px;">





  Selamat belajar style dasar pada HTML di website CodePolitan. Ikuti juga tutorial lainnya.





<div style="border:1px solid red;">

Contoh elemen bersarang.

</div>

</div>

Set margin untuk keempat sisi dari elemen <div> yang bersarang di elemen <div> pertama sebesar 10px, sehingga elemen yang bersarang ini memiliki jarak dari sisi-sisi batas elemen induknya.
```
<div style="border:1px solid red;margin:10px;">





  Contoh elemen bersarang.





</div>
```

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML</title>

</head>

<body>

<h1>Belajar HTML Dasar</h1>

Selamat belajar style dasar pada HTML di website TutorialCoding. Ikuti juga tutorial lainnya.

Contoh elemen bersarang.

</div>

Selamat belajar style dasar pada HTML di website TutorialCoding. Ikuti juga tutorial lainnya.

</div>

</body>

</html>

Hasilnya:

Belajar HTML Dasar

Selamat belajar style dasar pada HTML di website TutorialCoding. Ikuti juga tutorial lainnya.

Contoh elemen bersarang.

Selamat belajar style dasar pada HTML di website TutorialCoding. Ikuti juga tutorial lainnya.

Tutorial Belajar Margin di HTML

PRAKTEK

Belajar HTML Dasar

0 Response to "Tutorial Belajar Margin di HTML"

Posting Komentar