Properti margin-inline CSS

Halaman sebelumnya margin-bottom
Halaman berikutnya margin-inline-end

Definisi dan penggunaan

margin-inline Atribut menentukan marjin awal dan akhir searah baris, adalah singkatan untuk atribut berikut:

margin-inline Nilai atribut dapat diset dengan berbagai cara:

Jika atribut margin-inline memiliki dua nilai:

margin-inline: 10px 50px;

Margen eksternal awal adalah 10px
Margen eksternal akhir adalah 50px

Jika atribut margin-inline memiliki nilai:

margin-inline: 10px;

margin awal dan akhir adalah 10px

CSS margin-inline dan margin-block Atribut yang sama seperti margin-top,margin-bottom,margin-left dan margin-right Atribut yang sangat mirip, tetapi margin-inline dan margin-block Atribut ini tergantung dari arah blok dan arah baris.

Perhatian:Atribut CSS yang berhubungan writing-mode dan direction Definisi arah baris dalam. Ini akan mempengaruhi posisi awal dan akhir elemen, serta hasil atribut margin-inline-end. Untuk halaman berbahasa Inggris, arah blok turun dan arah baris bergerak dari kiri ke kanan.

Contoh

Contoh 1

Atur margin di sisi yang berada di sebelah kiri dan kanan arah baris:

div {
  margin-inline: 35px;
}

Coba sendiri

Contoh 2

Ketika nilai atribut <div> element writing-mode Ketika nilai atribut 'vertical-rl' disetel, arah baris bergerak ke bawah. Hasilnya posisi awal elemen pindah dari kiri ke atas, dan posisi akhir pindah dari kanan ke bawah:

div {
  margin-inline: 10px 50px;
  writing-mode: vertical-rl;
}

Coba sendiri

Contoh 3

Ketika nilai atribut <div> element direction Ketika nilai atribut 'rtl' disetel, arah baris bergerak dari kanan ke kiri. Hasilnya posisi awal elemen pindah dari kiri ke kanan, dan posisi akhir pindah dari kanan ke kiri:

div {
  margin-inline: 10px 50px;
  direction: rtl;
}

Coba sendiri

Syntaks CSS

margin-inline: auto|length|initial|inherit;

Nilai atribut

Nilai	Deskripsi
auto	Nilai standar. Nilai margin-inline standar elemen.
length	Tentukan margin-inline dengan satuan px, pt, cm, dll. Memungkinkan nilai negatif. Lihat:Unit CSS.
%	Tentukan persentase margin-inline yang berhubungan dengan ukuran elemen induk di arah baris.
initial	Atur atribut ini ke nilai standarnya. Lihat: initial.
inherit	Mengambil atribut ini dari elemen induknya. Lihat: inherit.

Detil teknis

Nilai standar:	auto
Inheritance:	Tidak
Produksi animasi:	Didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi:	CSS3
Syntaks JavaScript:	object.style.marginInline="50px 10px"