• English version
• Indonesia version

CSS Margins

Margin CSS menciptakan ruang di sekitar atau di luar suatu elemen.

Margin CSS - Sisi individu Properti berikut mengatur panjang margin di setiap sisi.

margin-top: Mengatur area margin di atas.

margin-right: mengatur area margin di sisi kanan.

margin-bottom : mengatur area margin di bagian bawah.

margin-left : Setel area margin di sisi kiri.

Sepertiini lah contoh pengunaannya.

Contoh:

css

.margin-div {
     margin-top: 30px;
     margin-left: 90px;
     background: pink;
}

html

<div class="margin-div" >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   </div>

CSS Margin - Shorthand Property

CSS property adalah singkatan untuk properti berikut:

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

CSS property anda dapat memiliki satu, dua, tiga atau empat nilai.

Ketika nilai kesatu1️⃣ ditambahkan, itu berlaku margin yang sama ke keempat sisi.

margin: 20px1️⃣;

Ketika nilai kedua2️⃣ ditambahkan, nilai pertama berlaku untuk bagian atas dan bawah, yang kedua ke kiri dan kanan.

margin: 40px1️⃣ 20px2️⃣;

Ketika nilai ketiga3️⃣ ditambahkan, nilai pertama berlaku untuk bagian atas, yang kedua ke kiri dan kanan, yang ketiga ke bawah.

margin: 20px1️⃣ 40px2️⃣ 20px3️⃣;

Ketika nilai keempat4️⃣ ditambahkan, margin berlaku untuk bagian atas, kanan, bawah, dan masing-masing dalam urutan (searah jarum jam).

margin: 40px1️⃣ 20px2️⃣ 40px3️⃣ 20px4️⃣;

Horizontally Centering an Element

Kita dapat elemen ada di tengah.

.margin-tengah {
    margin : 0 autO;
    width: 200px;
    height: 200px;
    background: lightgrey;
}

html

<div class="margin-tengah" >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   </div>