Margin CSS

View Categories

Margin CSS

Margin digunakan untuk membuat ruang di sekitar elemen, ruang ini berada di luar batas/border yang diberikan pada elemen HTML tersebut.

CSS Margin

Properti CSS margin digunakan untuk membuat ruang di sekitar elemen.

Dengan menggunakan CSS, margin dapat diatur sehingga lebar ruang di sekitar elemen dapat ditentukan. Berikut adalah properti-properti untuk mengubah margin di setiap sisi elemen (atas, kanan, bawah, dan kiri).

Mengatur Margin Untuk Setiap Sisi

CSS memiliki properti untuk menentukan margin di setiap sisi elemen:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Semua properti margin dapat memiliki nilai berikut:

  • auto – browser menghitung margin secara otomatis
  • length – menentukan margin dalam px, pt, cm, dll
  • % – menentukan margin dalam % dari lebar elemen yang memuatnya
  • inherit – menentukan bahwa margin harus diwariskan dari elemen induk

Tips: Nilai margin negatif diperbolehkan

Contoh

Menetapkan margin yang berbeda untuk keempat sisi sebuah elemen <p>:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Menggunakan properti margin untuk setiap sisi</h2>

<div>Elemen div ini memiliki margin atas 100px, margin kanan 150px, margin bawah 100px dan margin kiri 80px.</div>

</body></html>

Jalankan Contoh

Properti Singkat/Gabungan Margin

Untuk mempersingkat kode, dimungkinkan untuk menentukan semua properti untuk mengatur margin dalam satu properti.

Properti margin adalah properti singkat/gabungan untuk masing-masing properti pengaturan margin berikut:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Aturannya adalah sebagai berikut.

Jika properti margin memiliki empat nilai:

  • margin: 25px 50px 75px 100px;
    • margin atas adalah 25px
    • margin kanan adalah 50px
    • margin bawah adalah 75px
    • margin kiri adalah 100px

Contoh

Penggunaan properti singkat untuk margin dengan empat nilai:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Properti singkat/gabungan margin - 4 nilai</h2>

<div>Elemen div ini memiliki margin atas 25px, margin kanan 50px, margin bawah 75px dan margin kiri 100px.</div>

</body></html>

Jalankan Contoh

Jika properti margin memiliki tiga nilai:

  • margin: 25px 50px 75px;
    • margin atas adalah 25px
    • margin kanan dan kiri adalah 50px
    • margin bawah adalah 75px

Contoh

Penggunaan properti singkat untuk margin dengan tiga nilai:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Properti singkat/gabungan margin - 3 nilai</h2>

<div>Elemen div ini memiliki margin atas 25px, margin kanan dan kiri 50px dan margin bawah 75px.</div>

</body></html>

Jalankan Contoh

Jika properti margin memiliki dua nilai:

  • margin: 25px 50px;
    • margin atas dan bawah adalah 25px
    • margin kanan dan kiri adalah 50px

Contoh

Penggunaan properti singkat untuk margin dengan dua nilai:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Properti singkat/gabungan margin - 2 nilai</h2>

<div>Elemen div ini memiliki margin atas dan bawah 25px, serta margin kanan dan kiri 50px.</div>

</body></html>

Jalankan Contoh

Jika properti margin memiliki satu nilai:

  • margin: 25px;
    • keempat margin adalah 25px

Contoh

Penggunaan properti singkat untuk margin dengan satu nilai:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Properti singkat/gabungan margin - 1 nilai</h2>

<div>Elemen div ini memiliki margin atas, bawah, kiri, dan kanan 25px.</div>

</body></html>

Jalankan Contoh

Nilai Margin auto

Untuk mengubah margin menjadi otomatis dapat menyetel properti margin ke auto untuk memusatkan elemen secara horizontal di dalam elemen induknya.

Elemen kemudian akan menggunakan lebar yang ditentukan untuk elemen tersebut, dan ruang yang tersisa akan dibagi rata antara margin kiri dan kanan.

Contoh

Penggunaan margin: auto:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
</style>
</head>
<body>

<h2>Penggunaan margin: auto</h2>
<p>Anda dapat menyetel properti margin ke auto untuk memusatkan elemen secara horizontal. Elemen kemudian akan mengambil lebar yang ditentukan dan ruang yang tersisa akan dibagi rata antara margin kiri dan kanan :</p>

<div>
Div ini akan dipusatkan secara horizontal karena memiliki margin: auto;
</div>

</body></html>

Jalankan Contoh

Nilai Yang Diwariskan (inherit)

Contoh ini memperlihatkan margin kiri dari elemen <p class=”ex1″> diwariskan dari elemen induk (<div>):

Contoh

Penggunaan nilai inherit:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>

<h2>Penggunaan nilai margin : inherit</h2>
<p>Nilai margin kiri diwariskan (inherit) dari elemen induk:</p>

<div>
<p class="ex1">Paragraf ini memiliki margin kiri yang diwariskan (dari elemen div).</p>
</div>

</body></html>

Jalankan Contoh

Referensi Semua Properti Margin CSS

Properti margin CSS

Contoh

Atur margin untuk keempat sisi sebuah elemen <p> menjadi 35 piksel:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  margin: 35px;
}
</style>
</head>
<body>

<h1>Properti margin</h1>

<p>Sebuah paragraf tanpa margin.</p>
<p class="ex1">Paragraf ini memiliki margin 35 piksel di keempat sisinya.</p>
<p>Sebuah paragraf tanpa margin.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti margin menetapkan margin untuk suatu elemen, dan merupakan properti singkat/gabungan untuk properti berikut:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-kiri

Jika properti margin memiliki empat nilai:

  • margin: 10px 5px 15px 20px;
    • margin atas adalah 10px
    • margin kanan adalah 5px
    • margin bawah adalah 15px
    • margin kiri adalah 20px

Jika properti margin memiliki tiga nilai:

  • margin: 10px 5px 15px;
    • margin atas adalah 10 piksel
    • margin kanan dan kiri adalah 5px
    • margin bawah adalah 15px

Jika properti margin memiliki dua nilai:

  • margin: 10px 5px;
    • margin atas dan bawah adalah 10px
    • margin kanan dan kiri adalah 5px

Jika properti margin memiliki satu nilai:

  • margin: 10px;
    • keempat margin adalah 10px

Catatan: Nilai negatif diperbolehkan.

Margin Collapse

Margin atas dan bawah elemen terkadang dikecilkan menjadi satu margin yang sama dengan margin terbesar dari dua margin tersebut.

Margin collapse tidak terjadi pada margin horizontal (kiri dan kanan) dan hanya terjadi pada margin vertikal (atas dan bawah).

Lihat contoh berikut:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  margin: 30px 0;
}

p.b {
  margin: 20px 0;
}
</style>
</head>
<body>

<h1>Contoh Margin Collapse</h1>
<p>Margin atas dan bawah elemen dikecilkan menjadi satu margin yang sama dengan margin terbesar dari kedua margin tersebut.</p>

<p class="a">Paragraf dengan margin atas dan bawah 30 piksel.</p>
<p class="b">Paragraf dengan margin atas dan bawah 20 piksel.</p>

<p>Margin vertikal antara dua paragraf di atas harusnya 50px (30px + 20px). Namun karena pengecilan margin, margin sebenarnya menjadi 30px!</p>

</body></html>

Jalankan Contoh

Dalam contoh di atas, elemen <p class=”a”> memiliki margin atas dan bawah 30px sedangkan elemen <p class=”b”> memiliki margin atas dan bawah 20px.

Ini berarti margin vertikal antara <p class=”a”> dan <p class=”b”> seharusnya harus 50px (30px + 20px), namun karena pengecilan margin (margin collapse), margin sebenarnya menjadi hanya 30px (nilai terbesar antara dua margin tersebut).

Contoh Lain Untuk Properti margin

Contoh

Menetapkan margin untuk elemen <p> menjadi 35 piksel untuk atas dan bawah, dan menjadi 70 piksel untuk kanan dan kiri:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  margin: 35px 70px;
}
</style>
</head>
<body>

<h1>Properti margin </h1>

<p>Sebuah paragraf tanpa margin</p>
<p class="ex1">Paragraf ini memiliki margin 35 piksel untuk atas dan bawah dan margin 70 piksel untuk kanan dan kiri.</p>
<p>Sebuah paragraf tanpa margin</p>

</body></html>

Jalankan Contoh

Contoh

Menetapkan margin untuk elemen <p> menjadi 35 piksel untuk bagian atas, 70 piksel untuk kanan dan kiri, dan hingga 50 piksel untuk bagian bawah:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  margin: 35px 70px 50px;
}
</style>
</head>
<body>

<h1>Properti margin </h1>

<p>Sebuah paragraf tanpa margin</p>
<p class="ex1">Paragraf ini memiliki margin 35 piksel untuk bagian atas, margin 70 piksel untuk kanan dan kiri dan margin 50 piksel untuk bagian bawah.</p>
<p>Sebuah paragraf tanpa margin</p>

</body></html>

Jalankan Contoh

Contoh

Menetapkan margin untuk elemen <p> ke 35 piksel untuk atas, 70 piksel untuk kanan, 50 piksel untuk bawah, dan hingga 90 piksel untuk kiri:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  margin: 35px 70px 50px 90px;
}
</style>
</head>
<body>

<h1>Properti margin </h1>

<p>Sebuah paragraf tanpa margin</p>
<p class="ex1">Paragraf ini memiliki margin 35 piksel untuk bagian atas, margin 70 piksel untuk kanan, margin 50 piksel untuk bawah dan margin 90 piksel untuk kiri.</p>
<p>Sebuah paragraf tanpa margin</p>

</body></html>

Jalankan Contoh

Properti CSS margin-bottom

Contoh

Menetapkan margin bawah untuk elemen <p> menjadi 25 piksel:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  margin-bottom: 25px;
}
</style>
</head>
<body>

<h1>Properti margin-bottom</h1>

<p>Paragraf tanpa margin</p>
<p class="ex1">Paragraf dengan margin bawah 25 piksel.</p>
<p>Paragraf tanpa margin</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti margin-bottom mengubah margin bawah suatu elemen.

Catatan: Nilai negatif diperbolehkan.

Contoh

Menetapkan margin bawah untuk elemen <p> hingga 10% dari lebar penampung:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  margin-bottom: 10%;
}
</style>
</head>
<body>

<h1>Properti margin-bottom</h1>

<p>Paragraf tanpa margin</p>
<p class="ex1">Paragraf dengan margin bawah 10%. Persentase dihitung berdasarkan lebar elemen yang memuatnya.</p>
<p>Paragraf tanpa margin</p>

</body></html>

Jalankan Contoh

Contoh

Menetapkan margin bawah untuk elemen <p> ke 2em :

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  margin-bottom: 2em;
}
</style>
</head>
<body>

<h1>Properti margin-bottom</h1>

<p>Paragraf tanpa margin</p>
<p class="ex1">Paragraf dengan margin bawah 2 em. Unit em relatif terhadap ukuran font elemen (2em berarti 2 kali ukuran font saat ini).</p>
<p>Paragraf tanpa margin</p>

</body></html>

Jalankan Contoh

Properti CSS margin-left

Contoh

Menetapkan margin kiri untuk elemen <p> hingga 30 piksel:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  margin-left: 30px;
}
</style>
</head>
<body>

<h1>Properti margin-left</h1>

<p>Paragraf tanpa margin</p>
<p class="ex1">Paragraf dengan margin kiri 30piksel.</p>
<p>Paragraf tanpa margin</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti margin-left mengatur elemen margin kiri.

Catatan: Nilai negatif diperbolehkan.

Contoh

Menetapkan margin kiri untuk elemen <p> hingga 10% dari lebar penampung:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  margin-left: 10%;
}
</style>
</head>
<body>

<h1>Properti margin-left</h1>

<p>Paragraf tanpa margin</p>
<p class="ex1">Sebuah paragraf dengan margin kiri 10%. Persentase dihitung berdasarkan lebar elemen yang memuatnya.</p>
<p>Paragraf tanpa margin</p>

</body></html>

Jalankan Contoh

Contoh

Menetapkan margin kiri untuk elemen <p> elemen ke 2em:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  margin-left: 2em;
}
</style>
</head>
<body>

<h1>Properti margin-left</h1>

<p>Paragraf tanpa margin</p>
<p class="ex1">Paragraf dengan margin kiri 2 em. Unit em relatif terhadap ukuran font elemen (2em berarti 2 kali ukuran font saat ini).</p>
<p>Paragraf tanpa margin</p>

</body></html>

Jalankan Contoh

Properti CSS margin-right

Contoh

Menetapkan margin kanan untuk elemen <p> menjadi 150 piksel:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  margin-right: 150px;
}
</style>
</head>
<body>

<h1>Properti margin-right</h1>

<p>Paragraf tanpa margin. Sebuah paragraf tanpa margin. Paragraf tanpa margin. Paragraf tanpa margin.</p>
<p class="ex1">Paragraf dengan margin kanan 150 piksel. Paragraf dengan margin kanan 150 piksel. Paragraf dengan margin kanan 150 piksel.</p>
<p>Paragraf tanpa margin. Sebuah paragraf tanpa margin. Paragraf tanpa margin. Paragraf tanpa margin.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti margin-right menetapkan margin kanan suatu elemen.

Catatan: Nilai negatif diperbolehkan.

Contoh

Menetapkan margin kanan untuk elemen <p> hingga 50% dari lebar penampung:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  margin-right: 50%;
}
</style>
</head>
<body>

<h1>Properti margin-right</h1>


<p>Paragraf tanpa margin. Sebuah paragraf tanpa margin. Paragraf tanpa margin. Paragraf tanpa margin.</p>
<p class="ex1">Paragraf dengan margin kanan 50%. Persentase dihitung berdasarkan lebar elemen yang memuatnya.</p>
<p>Paragraf tanpa margin. Sebuah paragraf tanpa margin. Paragraf tanpa margin. Paragraf tanpa margin.</p>

</body></html>

Jalankan Contoh

Contoh

Menetapkan margin kanan untuk elemen <p> ke 15em:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  margin-right: 15em;
}
</style>
</head>
<body>

<h1>Properti margin-right</h1>

<p>Paragraf tanpa margin. Sebuah paragraf tanpa margin. Paragraf tanpa margin. Paragraf tanpa margin.</p>
<p class="ex1">Paragraf dengan margin kanan 15 em. Unit em relatif terhadap ukuran font elemen (2em berarti 2 kali ukuran font saat ini).</p>
<p>Paragraf tanpa margin. Sebuah paragraf tanpa margin. Paragraf tanpa margin. Paragraf tanpa margin.</p>

</body></html>

Jalankan Contoh

Properti CSS margin-top

Contoh

Menetapkan margin atas untuk elemen <p> menjadi 25 piksel:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  margin-top: 25px;
}
</style>
</head>
<body>

<h1>Properti margin-top</h1>

<p>Paragraf tanpa margin</p>
<p class="ex1">Paragraf dengan margin atas 25 piksel.</p>
<p>Paragraf tanpa margin</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti margin-top menetapkan margin atas suatu elemen.

Catatan: Nilai negatif diperbolehkan.

Contoh

Menetapkan margin atas untuk elemen <p> hingga 10% dari lebar penampung:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  margin-top: 10%;
}
</style>
</head>
<body>

<h1>Properti margin-top</h1>

<p>Paragraf tanpa margin.</p>
<p class="ex1">Paragraf dengan margin atas 10%. Persentase dihitung berdasarkan lebar elemen yang memuatnya.</p>
<p>Paragraf tanpa margin</p>

</body></html>

Jalankan Contoh

Contoh

Menetapkan margin atas untuk elemen <p> ke 2 em:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  margin-top: 2em;
}
</style>
</head>
<body>

<h1>Properti margin-top</h1>

<p>Paragraf tanpa margin</p>
<p class="ex1">Paragraf dengan margin atas 2 em. Unit em relatif terhadap ukuran font elemen (2em berarti 2 kali ukuran font saat ini).</p>
<p>Paragraf tanpa margin</p>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : CSS Border Radius
Tutorial setelahnya : Padding CSS
Semua Tutorial CSS : Tutorial CSS 

Tinggalkan Balasan