Apa yang dilakukan otomatis dalam margin: 0 otomatis?

126

Apa yang autodilakukan margin:0 auto;?

Sepertinya saya tidak mengerti apa yang autodilakukannya. Saya tahu itu terkadang memiliki efek pemusatan objek. Terima kasih.

css Jitendra Vyas
sumber

Jawaban:

189

Ketika Anda telah menentukan sebuah widthpada objek yang telah Anda terapkan margin: 0 auto, objek tersebut akan berada di tengah dalam wadah induknya.

Menentukan autosebagai parameter kedua pada dasarnya memberi tahu browser untuk secara otomatis menentukan margin kiri dan kanan itu sendiri, yang dilakukan dengan mengaturnya secara merata. Ini menjamin bahwa margin kiri dan kanan akan diatur ke ukuran yang sama. Parameter pertama 0 menunjukkan bahwa margin atas dan bawah keduanya akan disetel ke 0.

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

Oleh karena itu, sebagai contoh , jika induknya 100px dan anaknya adalah 50px, maka autoproperti akan menentukan bahwa ada 50px ruang kosong untuk dibagikan antara margin-leftdan margin-right:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

Yang akan memberi: 

margin-left:25;
margin-right:25;

Lihat jsFiddle ini . Anda tidak harus menentukan lebar induk, hanya lebar objek anak.

djdd87.dll
sumber
tetapi kami tidak pernah menentukan lebar apa pun untuk bodydan kami selalu memberi widthdan margin:0 autokepada#wrapper
Jitendra Vyas
ok maka margin antara tubuh dan objek akan dihitung oleh browser secara otomatis.
Jitendra Vyas
Apakah ada nilai yang serupa %? Maksud saya apakah ada properti lain di css yang dapat memberikan hasil yang sama seperti kiri dan kananauto
Jitendra Vyas
@GenericTypeTea - dan apa yang terjadi dalam margin:auto 0kondisi?
Jitendra Vyas
Namun, mengapa ketika saya menggunakan margin: 20 auto, apakah itu tampaknya memengaruhi pemosisian kiri-kanan? Tampaknya yang saya lakukan hanyalah menambahkan margin atas / bawah ...
pitosalas
13

auto: Browser menyetel margin. Hasil dari ini bergantung pada browser

margin: 0 otomatis menentukan

* top and bottom margins are 0
* right and left margins are auto
tulang kering
sumber
9

Dari spesifikasi CSS pada Menghitung lebar dan margin untuk level Blok, elemen yang tidak diganti dalam aliran normal :

Jika 'margin-left' dan 'margin-right' keduanya adalah 'auto', nilai yang digunakan sama. Ini memusatkan elemen secara horizontal sehubungan dengan tepi blok penampung.

Gumbo
sumber
"nilai yang mereka gunakan sama" apa artinya ini?
Jitendra Vyas
3
@ metal-gear-solid - Jika lebar induk (ditentukan oleh browser atau lebar yang ditentukan) adalah 100px dan lebar div anak Anda adalah 50px. Kemudian margin: 0 auto akan menentukan bahwa ada 50px ruang yang tersedia. Ini kemudian akan membaginya dengan 2, memberikan 25. Margin kiri dan kanan kemudian keduanya diatur ke 25, yaitu nilai-nilai ditetapkan sama.
djdd87
1
Nilai yang digunakan merujuk ke nilai yang sebenarnya digunakan bergantung pada properti visual aktual dari elemen yang menggunakan properti ini dan blok yang memuatnya. Bagian tertaut memiliki rumus yang digunakan untuk menghitung perbedaan horizontal antara elemen dan blok yang memuatnya. Perbedaan itu kemudian dilepaskan secara merata dan digunakan sebagai nilai margin horizontal aktual.
Gumbo
6 
margin:0 auto;

0untuk atas-bawah dan autountuk kiri-kanan. Artinya margin kiri dan kanan akan mengambil margin otomatis sesuai dengan lebar elemen dan lebar wadah.

Umumnya jika Anda ingin meletakkan elemen apa pun di posisi tengah maka margin:autoberfungsi dengan sempurna. Tapi itu hanya bekerja di elemen blok.

pengguna3237573
sumber
1 
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

0 untuk atas-bawah dan otomatis untuk kiri-kanan. Browser mengatur margin.

jaffer sathick
sumber
1

Ini menjadi lebih jelas dengan beberapa penjelasan tentang bagaimana kedua nilai tersebut bekerja.

Properti margin adalah singkatan dari:

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

Jadi kenapa hanya dua nilai?

Nah, Anda bisa mengekspresikan margin dengan empat nilai seperti ini:

margin: 10px, 20px, 15px, 5px;

yang berarti 10px atas, 20px kanan, 15px bawah, 5px kiri

Demikian juga Anda juga bisa mengekspresikan dengan dua nilai seperti ini:

margin: 20px 10px;

Ini akan memberi Anda margin 20px atas dan bawah dan 10px kiri dan kanan.

Dan jika Anda mengatur:

margin: 20px auto;

Maka itu berarti margin atas dan bawah 20px dan margin kiri dan kanan otomatis. Dan otomatis berarti margin kiri / kanan diatur secara otomatis berdasarkan wadah. Jika elemen Anda adalah elemen tipe blok, artinya itu adalah kotak dan menempati seluruh lebar tampilan, maka otomatis menyetel margin kiri dan kanan yang sama dan karenanya elemen tersebut dipusatkan.

Angus Comber
sumber
-3

Ini rusak / sangat sulit untuk digunakan sebagai pengganti tag "tengah". Ini sangat berguna ketika Anda membutuhkan tabel yang rusak dan pemusatan yang tidak berfungsi untuk blok dan teks.

Danny
sumber