perbedaan antara lebar otomatis dan lebar 100 persen

99

Asumsi saya sebelumnya tentang width: auto adalah bahwa lebar diatur dengan konten. Sekarang saya melihat bahwa itu mengambil lebar penuh dari induk.

Adakah yang bisa menjelaskan perbedaan antara ini?

html css Navin Rauniyar
sumber
kemungkinan duplikat Lebar pengaturan: otomatis mengarah ke lebar: 100%
Adriano Repetti
Singkatnya: 1) auto, lebar / tinggi div induk akan menjadi jumlah dari anaknya. 2) 100 persen, lebar / tinggi akan menjadi milik orang tuanya. Lihat artikel di sini
Alan Dong

Jawaban:

142

Lebar otomatis

Lebar awal elemen level blok seperti div atau p adalah otomatis. Ini membuatnya meluas untuk menempati semua ruang horizontal yang tersedia di dalam blok penampungnya. Jika memiliki padding horizontal atau border, lebarnya tidak menambah lebar total elemen.

Lebar 100%

Di sisi lain, jika Anda menentukan lebar: 100%, lebar total elemen akan menjadi 100% dari blok penampungnya ditambah margin horizontal, padding dan batas (kecuali Anda telah menggunakan ukuran kotak: batas-kotak, dalam hal ini hanya margin yang ditambahkan ke 100% untuk mengubah cara penghitungan lebar totalnya). Ini mungkin yang Anda inginkan, tetapi kemungkinan besar tidak.

Untuk memvisualisasikan perbedaannya, lihat gambar ini:

masukkan deskripsi gambar di sini

Sumber

Bhojendra Rauniyar
sumber
3
Bagi mereka yang penasaran tentang mengapa width: autoberperilaku seperti itu: stackoverflow.com/questions/28353625/…
Hashem Qolami
1
begitu autopula hal yang sama sepertifill-available
jiggunjer
2
Jadi pada dasarnya ini tidak ada hubungannya dengan ukuran konten elemen, tetapi sepenuhnya mengacu pada lebar induk?
haemse
82

  • width: auto; akan berusaha sekuat mungkin untuk menjaga elemen dengan lebar yang sama dengan wadah induknya ketika ruang tambahan ditambahkan dari margin, padding, atau border.

  • width: 100%;akan membuat elemen selebar wadah induk. Spasi ekstra akan ditambahkan ke ukuran elemen tanpa memperhatikan induknya. Ini biasanya menyebabkan masalah.

masukkan deskripsi gambar di sini masukkan deskripsi gambar di sini

Ian Jennings
sumber
2
hal yang sama seperti yang disediakan @ C-link tetapi lebih banyak antarmuka grafis. jadi +1
Navin Rauniyar
8

Ini tentang margin dan perbatasan. Jika Anda menggunakan width: auto, lalu tambahkan border, div Anda tidak akan menjadi lebih besar dari containernya. Di sisi lain, jika Anda menggunakan width: 100%dan beberapa perbatasan, lebar elemen akan menjadi 100% + perbatasan atau margin. Untuk info lebih lanjut lihat ini .

Mateusz
sumber
4

Selama nilai width adalah auto, elemen dapat memiliki margin horizontal, padding dan border tanpa menjadi lebih lebar dari containernya (kecuali jika jumlah margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right lebih besar dari container). Lebar kotak isinya akan menjadi apa pun yang tersisa ketika margin, padding, dan batas telah dikurangi dari lebar wadah.

Di sisi lain, jika Anda menentukan lebar: 100%, lebar total elemen akan menjadi 100% dari blok penampungnya ditambah margin horizontal, padding dan batas (kecuali Anda telah menggunakan ukuran kotak: batas-kotak, dalam hal ini hanya margin yang ditambahkan ke 100% untuk mengubah cara penghitungan lebar totalnya). Ini mungkin yang Anda inginkan, tetapi kemungkinan besar tidak.

Sumber:

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Gokul Gopala Krishnan
sumber
3

Lebar awal elemen level blok seperti div atau p adalah otomatis.

Gunakan lebar: otomatis untuk membatalkan lebar yang ditentukan secara eksplisit.

jika Anda menentukan lebar: 100%, lebar total elemen akan menjadi 100% dari blok penampungnya ditambah margin horizontal, padding, dan batas.

Jadi, lain kali Anda menemukan diri Anda menyetel lebar elemen level blok ke 100% untuk membuatnya memenuhi semua lebar yang tersedia, pertimbangkan jika yang Anda inginkan adalah menyetelnya ke otomatis.

Michael Unterthurner
sumber
3

Lebar 100%: Ini akan membuat konten dengan 100%. margin, border, padding akan ditambahkan ke lebar ini dan elemen akan meluap jika ada yang ditambahkan.

Lebar otomatis: Ini akan sesuai dengan elemen di ruang yang tersedia termasuk margin, perbatasan, dan bantalan. ruang tersisa setelah menyesuaikan margin + padding + border akan tersedia lebar / tinggi.

Lebar 100% + ukuran kotak: kotak batas: Ini juga akan sesuai dengan elemen di ruang yang tersedia termasuk batas, bantalan (margin akan membuatnya meluap dari wadah).

Nishant Baranwal
sumber
1

Menggunakan lebar: otomatis; + tampilan: blok-sebaris; di css memberikan efek yang luar biasa.

width : auto;
display: inline-block;
Mohammed Javed
sumber
2
Ini tidak menjawab pertanyaan tentang perbedaan antara 100 & dan otomatis.
JoeTidee
1
Ya, saya tahu tetapi saya mencoba menunjukkan di sini tentang lebar: otomatis dan tampilan: blok-sebaris . Ketika kita ingin menambah lebar secara otomatis dari elemen level blok manapun maka kita dapat menggunakan ini. Dan perbedaan antara 100% & otomatis
Mohammed Javed
0

Saat kami berkata 

width:auto;

lebar tidak akan pernah melebihi lebar total elemen induk. Lebar maksimum adalah lebar induknya. Kalaupun kita menambahkan border, padding dan margin, konten elemen itu sendiri akan mengecil untuk memberi ruang pada border, padding dan margin. Jika spasi yang dibutuhkan untuk border + padding + margin lebih besar dari lebar total elemen induk maka lebar konten akan menjadi nol.

Saat kami berkata

width:100%;

lebar konten elemen akan menjadi 100% elemen induk dan mulai sekarang jika ditambahkan border, padding atau margin maka akan menyebabkan elemen anak melebihi lebar elemen induk dan akan mulai meluap keluar elemen induk.

Santosh Kadam
sumber