Tutorial Belajar Margin di HTML
Sunday, May 14, 2017
Add Comment
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>
<div style="border:1px solid blue;">
Selamat belajar style dasar pada HTML di website TutorialCoding. Ikuti juga tutorial lainnya.
<div style="border:1px solid red;">
Contoh elemen bersarang.
</div>
</div>
<div style="border:1px solid blue;">
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.
0 Response to "Tutorial Belajar Margin di HTML"
Post a Comment