CSS Margin yaitu tag atau propeti untuk membuat atau mengatur sebuah ruangan ( space ) disekitar element atau di luar elemen.
CSS Margin – Penggunaan Individu
margin-top. Margin-top sebuah propeti akan membuat atau mengatur sebuah ruangan berada diatas.margin-right. Margin-right sebuah propeti akan membuat atau mengatur sebuah ruangan berada dikanan.margin-bottom. Margin-bottom sebuah propeti akan membuat atau mengatur sebuah ruangan berada dibawah.margin-left. margin-left sebuah propeti akan membuat atau mengatur sebuah ruangan berada dikiri.
Semua element margin mempunyai nilai yaitu
- auto – value ini otomatis mengikuti web
- length – menentukan margin dalam bentuk px, pt, cm, dll.
- % – menentukan margin dalam bentuk % dari lebar elemen
- inherit – menentukan margin harus diwaris dari induk
Contoh Individu CSS Margin
<!DOCTYPE html> <html> <head> <!-- ini adalah baris kode css --> <style> div { border: 1px solid black; /*Membuat sebuah border garis*/ margin-top: 100px; /*Mengatur space atas*/ margin-bottom: 100px; /*Mengatur space atas*/ margin-right: 150px; /*Mengatur space atas*/ margin-left: 80px; /*Mengatur space atas*/ background-color: lightblue; /*background dalam div akan biru cerah*/ } </style> <!-- ini adalah akhir baris kode css --> </head> <body> <h2>Menggunakan Propeti Margin</h2> <div>Selamat datang di web saya dosencode.com</div> </body> </html>
Section Artikel
Shorthand Properti CSS Margin
Untuk mempersingkat kode, dimungkinkan untuk menentukan semua properti margin dalam satu properti. Properti margin adalah properti singkatan untuk properti margin individual berikut:
margin-topmargin-rightmargin-bottommargin-left
Jika margin memiliki 4 nilai maka penulisannya
margin: 30px 55px 80px 105px;
Penjelasannya :
- top margin adalah 30px
- right margin adalah 55px
- bottom margin adalah 80px
- left margin adalah 105px
Contoh CSS Margin ShortHand
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid black; /*Membuat sebuah border garis*/
margin: 30px 55px 80px 105px; /*top = 30px right = 55px bawah = 80px kiri 105px*/
background-color: yellow; /*background dalam border akan berwarna kuning*/
}
</style>
<!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>ShortHand CSS Margin</h1>
<p>Selamat Datang Di Web dosencode</p>
</body>
</html>Jika memiliki 3 nilai maka penjelasan dan penulisannya yaitu :
margin: 30px 55px 80px;
- top margin adalah 30px
- right and left margin adalah 55px
- bottom margin adalah 80px
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid black; /*Membuat sebuah border garis*/
margin: 30px 55px 80px; /*top = 30px right dan left = 55px bottom = 80px*/
background-color: yellow; /*background dalam border akan berwarna kuning*/
}
</style>
<!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>ShortHand CSS Margin</h1>
<p>Selamat Datang Di Web dosencode</p>
</body>
</html>Jika memiliki 2 nilai maka penjelasan dan penulisannya yaitu :
margin: 30px 55px;
- top dan bottom margin adalah 30px
- right dan left margin adalah 55px
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid black; /*Membuat sebuah border garis*/
margin: 30px 55px; /*top dan bottom = 30px right dan left = 55px*/
background-color: yellow; /*background dalam border akan berwarna kuning*/
}
</style>
<!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>ShortHand CSS Margin</h1>
<p>Selamat Datang Di Web dosencode</p>
</body>
</html>Jika memiliki 1 nilai maka penjelasan dan penulisannya yaitu :
margin: 30px;
- semua margin 4 adalah 30px
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid black; /*Membuat sebuah border garis*/
margin: 30px; /*semua 4 margin = 30px */
background-color: yellow; /*background dalam border akan berwarna kuning*/
}
</style>
<!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>ShortHand CSS Margin</h1>
<p>Selamat Datang Di Web dosencode</p>
</body>
</html>Auto Value CSS Margin
Anda dapat mengatur properti margin ke otomatis untuk memusatkan elemen secara horizontal di dalam wadahnya. Elemen kemudian akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi rata antara margin kiri dan kanan.
<!DOCTYPE html>
<html>
<head>
<!-- ini adalah baris kode css -->
<style>
div {
width:350px; /*lebar = 350px*/
margin: auto; /*Margin akan otomatis*/
border: 1px solid blue; /*Membuat sebuah border garis*/
}
</style>
<!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>Auto Value Margin</h1>
<p>Propeti auto value margin</p>
<div>Paragraf yang telah di ubah stylenya.</div>
</body>
</html>Inherit Value CSS Margin
Contoh ini memungkinkan margin kiri elemen <p class = “halo”> diwarisi dari elemen induk (</div>):
<!DOCTYPE html>
<html>
<head>
<!-- ini adalah baris kode css -->
<style>
div {
border: 1px solid blue;
margin-left: 100px;
}
p.halo {
margin-left: inherit;
}
</style>
<!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>Menggunakan Inherit Value</h1>
<div>
<p class="halo">HALOOOO DOSENCODE.</p>
</div>
</body>
</html>Collapse CSS Margin
Margin elemen atas dan bawah kadang-kadang diciutkan menjadi margin tunggal yang sama dengan yang terbesar. Dari kedua margin. Hanya margin atas dan bawah.
<!DOCTYPE html>
<html>
<head>
<!-- ini adalah baris kode css -->
<style>
h1 {
margin: 0 0 60px 0;
}
h2 {
margin: 30px 0 0 0;
}
</style>
<!-- ini adalah akhir baris kode css -->
</head>
<body>
<h1>Heading</h1>
<h2>Heading</h2>
</body>
</html>Semua propeti CSS Margin
| Properti | Deskripsi |
|---|---|
| margin | Properti singkatan untuk mengatur properti margin dalam satu deklarasi |
| margin-bottom | Mengatur margin bawah pada sebuah elemen |
| margin-left | Mengatur margin kiri pada sebuah elemen |
| margin-right | Mengatur margin kanan pada sebuah elemen |
| margin-top | Mengatur margin atas pada sebuah elemen |
