Margin adalah daerah kosong disekeliling elemen yang bersifat transparent dan berada di sebelah luar garis tepi (border) elemen HTML. Padding dan margin keduanya sepintas letaknya hampir menyatu, jika padding berada di bagian dalam border sedangkan margin berada di bagian luarnya. Nilai margin ditetapkan dalam satuan jarak misalnya satuan px, pt, mm, cm dan satuan lainnya. Semakin besar nilai margin yang diberikan pada suatu elemen maka jarak elemen tersebut dengan elemen lainnya akan semakin jauh.
Margin berada di luar border suatu elemen. Margin berguna untuk mengatur jarak elemen satu dengan lainnya agar tidak saling bertabrakan ataupun tumpang tindih. Pada elemen tunggal yang tidak punya elemen lain disekelilingnya, margin kiri, margin atas dan margin kanan akan berbatasan langsung dengan sisi tepian layar (screen). Pengaturan margin akan membantu menata tampilan agar konten tidak terlalu dekat dan memberi ruang kosong dengan tepi layar.
Cara penulisan margin agak sedikit berbeda satu dengan lainnya. Hal ini dikarenakan margin memiliki tempat dan posisinya sendiri-sendiri. Setiap elemen yang diciptakan akan memiliki 4 buah margin yaitu margin atas, margin bawah, margin kanan, dan margin kiri.
Cara penulisan pertama :
margin: 10px;
Penulisan ini menggunakan 1 buah nilai yaitu 10px. Cara penulisan adalah yang paling sederhana. Cara ini akan menghantam rata nilai semua margin pada elemen tersebut yaitu senilai 10px. Nilai margin atas, nilai margin bawah, nilai margin kanan dan nilai margin kiri semuanya adalah 10px;
Cara penulisan ke-dua :
margin: 10px 15px;
Penulisan ini menggunakan 2 buah nilai yaitu 10px dan 15px. Cara penulisan ini untuk mengatur margin 2 arah yaitu margin arah vertikal dan margin arah horisontal. Margin arah vertikal yaitu margin atas dan bawah dengan nilai 10px serta margin arah horisontal yaitu margin kanan dan kiri dengan nilai 15px.
Cara penulisan ke-tiga :
margin: 10px 15px 30px;
Penulisan ini menggunakan 3 buah nilai yaitu 10px, 15px dan 30px. Cara penulisan ini untuk mengatur margin atas, margin arah horisontal (margin kanan dan kiri), dan margin bawah. Masing-masing akan mempunyai : nilai margin atas 10px, margin arah horisontal (margin kanan dan kiri) senilai 15px dan margin bawah senilai 30px.
Cara penulisan ke-empat :
margin: 10px 15px 20px 25px;
Penulisan ini menggunakan 4 buah nilai yaitu 10px, 15px, 20px dan 25px. Cara penulisan ini untuk mengatur setiap sisi margin dimulai dari : margin atas 10px, margin kanan 15px margin bawah 20px dan margin kiri 25px.
Cara penulisan ke-lima :
margin-top: 10px;
margin-bottom: 15px;
margin-right: 20px;
margin-left: 25px;
Penulisan ini menggunakan nama margin sesuai dengan posisinya. Misalnya margin-top untuk mengatur margin atas sebanyak 10px. Kemudian margin-bottom untuk mengatur margin bawah sebanyak 15px. Penulisannya dapat sekaligus untuk keseluruhan sisi margin atau bisa juga hanya untuk margin sisi tertentu saja yang akan diberi nilai batas margin.
Margin dapat digunakan untuk mengatur konten agar memiliki tata letak yang serasi antara elemen satu dengan lainnya. Pengaturan margin yang sesuai akan menghasilkan susunan konten yang menarik.
Pada contoh berikut, halaman diciptakan tanpa menggunakan margin :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
div{
border:solid 1px #ccc;
}
</style>
</head>
<body>
<div>Div tanpa margin</div>
<div>Div tanpa margin</div>
<div>Div tanpa margin</div>
<div>Div tanpa margin</div>
<div>Div tanpa margin</div>
<div>Div tanpa margin</div>
</body>
</html>
Contoh berikut menggunakan margin dengan nilai yang berbeda-beda. Margin dengan nilai negatif akan membuat elemen tersebut diposisikan terseret menjauhi posisi normal elemen.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
div{
color:navy;
font-size: 20px;
border:solid 2px teal;
}
</style>
</head>
<body>
<h1>Contoh margin: 20px;</h1>
<div style="margin: 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor. Nunc eu lacinia ex. Nam molestie vehicula sapien, vitae condimentum turpis maximus nec. Fusce eu accumsan metus. Aliquam blandit varius interdum.</div>
<div style="margin: 20px;">Aliquam euismod ut dolor laoreet feugiat. Aliquam mattis, lectus eget tristique tincidunt, erat ex posuere nulla, a laoreet purus dolor at metus. Ut elementum dictum mi, non gravida est condimentum iaculis. Suspendisse magna mi, dapibus sit amet bibendum vel, dapibus laoreet tortor. Nam lobortis sapien ultricies, suscipit risus non, blandit purus. In hac habitasse platea dictumst. Praesent eu pretium nibh. Maecenas nec elementum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</body>
</html>
Berikut contoh penggunaan margin:20px pada halaman bebas dengan konten teks.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
div{
color:navy;
font-size: 20px;
border:solid 2px teal;
}
</style>
</head>
<body>
<h1>Contoh margin: 20px;</h1>
<div style="margin: 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor. Nunc eu lacinia ex. Nam molestie vehicula sapien, vitae condimentum turpis maximus nec. Fusce eu accumsan metus. Aliquam blandit varius interdum.</div>
<div style="margin: 20px;">Aliquam euismod ut dolor laoreet feugiat. Aliquam mattis, lectus eget tristique tincidunt, erat ex posuere nulla, a laoreet purus dolor at metus. Ut elementum dictum mi, non gravida est condimentum iaculis. Suspendisse magna mi, dapibus sit amet bibendum vel, dapibus laoreet tortor. Nam lobortis sapien ultricies, suscipit risus non, blandit purus. In hac habitasse platea dictumst. Praesent eu pretium nibh. Maecenas nec elementum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</body>
</html>
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
