Dalam artikel singkat ini, kita akan menjelajahi beberapa kasus penggunaan untuk CSS fit-content. Jika Anda baru mengenal ukuran intrinsik CSS, saya menulisnya secara mendetail di artikel ini.

Mari selami!

Pendahuluan

Kata kunci fit-content akan membuat lebar elemen sama dengan kontennya berdasarkan kondisi tertentu.

Berikut adalah diagram alur yang menunjukkan bagaimana browser menanganinya.

Ini memeriksa apakah yang tersedia lebih dari max-content, maka lebarnya sama dengan max-content. Jika ruang yang tersedia kurang dari max-content, maka lebarnya akan sama dengan ruang yang tersedia. Terakhir, jika ruang yang tersedia kurang dari min-content, maka lebarnya akan sama dengan min-content.

Kasus penggunaan untuk fit-content

Judul Intrinsik

Pernahkah Anda membutuhkan cara untuk memusatkan judul dan menambahkan garis bawah khusus hanya untuk konten dan bukan seluruh elemen?

Kita bisa melakukannya dengan membungkus konten heading dalam rentang dan kemudian menerapkan garis bawah di atasnya.

Konten judul
 
h1  rentang  { kotak-bayangan
: 

  sisipan  0 
-6px
 
0 0 abu-abu muda ; }

 


 
 Dengan fit-content, ini tidak lagi diperlukan.
h1 { lebar
: 

 konten yang sesuai; margin-kiri
: 
 mobil;  margin-kanan:   otomatis 

;

 box-shadow:   sisipan  0 -6px 0  0 Abu-abu terang; 
}
  
 Demo

Gambar dan gambar

Dalam badan artikel, kita mungkin perlu memiliki 


 ambil lebar kontennya, dan jangan melebihi itu jika terlalu besar.
 
Menggunakan fit-content adalah sempurna untuk itu.
 


angka { lebar
: 

 konten yang sesuai; batas:  0 
mobil
; Latar Belakang:  #fff; padding:  1rem
;
 batas-radius  :  10px; 
}
 

 Demo

Blok Konten Intrinsik

Ini adalah salah satu favorit saya.  Dalam badan artikel, kami ingin blok konten tertentu sama dengan kontennya. 
Pada gambar berikut, kami memiliki widget “Artikel terkait” yang sama dengan isinya.
 

.artikel-tubuh  . widget terkait  { lebar:  konten yang sesuai; } 
  Tab Intrinsik
Ini adalah kasus penggunaan yang menarik yang saya temukan di Google Ads.  Idenya adalah kita ingin elemen tab hanya dapat diklik pada kontennya. 
Pada gambar berikut, perhatikan bagaimana area yang disorot merepresentasikan konten tab. 
.tab-item  {  flex-grow : 
 
1

; lebar:  konten sesuai; 
}
  
 Saya harap artikel ini bermanfaat bagi Anda.  Terima kasih telah membaca!
Baca selengkapnya


Rekomendasi:
Kami Hanya Manusia: 4 Cara Menjadi Editor Salinan… Kita semua pernah di sana – mengirim email promosi dengan kata yang hilang atau menyadari bahwa e-book Anda memiliki kesalahan format setelah membagikannya dengan audiens Anda. Sangat frustasi untuk melakukan…
Pengantar CIO ke Metaverse "Metaverse" akan datang. Apakah kamu siap? Microsoft, Nvidia, dan Facebook semuanya telah mengumumkan aplikasi signifikan untuk memberi perusahaan pintu ke metaverse. Banyak startup juga membangun teknologi semacam ini. Tapi apa…
Supercharge Penjualan Dengan Mendesain Situs Web… Pendapat yang dikemukakan oleh kontributor Entrepreneur adalah milik mereka sendiri. Anda sedang membaca Entrepreneur United States, sebuah waralaba internasional dari Entrepreneur Media. Untuk sebagian besar bisnis, tujuan utama situs web…
Bagaimana cara meminta perlindungan asuransi… Jika Anda mengalami obesitas, mendapatkan perawatan medis dan dukungan lain yang layak Anda dapatkan bisa jadi sulit. Asuransi mungkin tidak mencakup semua perawatan modern atau program khusus. Dan biaya Anda…
Pokies Slot Lama Dengan Jackpot Progresif Menjadi… Jackpot progresif adalah hadiah terbesar yang bisa dimenangkan pemain di kasino online. Penghasilan dari mencapai kumpulan hadiah tidak dapat dibandingkan dengan kemenangan reguler, manfaat promosi, atau sistem lain apa pun…
Mumbai terus mendorong penguncian lebih jauh Mumbai tidak akan melakukan penguncian—belum juga.Awal minggu ini, kepala perusahaan kota Mumbai Iqbal Singh Chahal mengatakan pusat keuangan India hanya akan memberlakukan pembatasan jika kasus harian melewati batas 20.000. Walikota…
Umpan RSS tentang apa yang dilakukan Pemerintah Umpan RSS tersedia untuk banyak koleksi govinfo dan umumnya mencakup 100 dokumen terbaru yang diterbitkan. Umpan juga tersedia untuk data massal, yang dapat digunakan dengan penyimpanan data massal GPO untuk…
Tonton prototipe Intel Arc Alchemist GPU dibuka kotaknya Berwawasan ke depan: Dalam beberapa hari terakhir, contoh rekayasa GPU Intel Arc Alchemist telah muncul di foto dan video. Tentu, mereka tidak mengungkapkan banyak, tetapi mereka menunjukkan bahwa Intel membuat…
Pelajari cara mengembangkan game menggunakan mesin… StackCommerce Industri video game bernilai lebih dari $300 miliar secara global. Dan jumlah yang sangat besar itu diperkirakan akan terus meningkat setiap tahun. Bawa pulang? Jika Anda menginginkan karier dengan…
WTF adalah Web3? Sejumlah kata kunci baru dimasukkan ke dalam kamus industri media tahun lalu, termasuk “blockchain”, “NFT”, dan “metaverse.” Semuanya memberi ruang untuk istilah lain: “Web3” yang mencakup segalanya, yang merupakan label…
Deshaun Watson Mengajukan Deposisi ke-5 Sepanjang… Carmen Mandato/Getty ImagesDeshaun Pengacara Watson, Rusty Hardin, mengatakan pada hari Selasa bahwa kliennya akan mengajukan pembelaan Kelima selama deposisi perdatanya, karena Kantor Kejaksaan Distrik Harris sedang mempresentasikan temuan investigasi kriminalnya…
Adobe Photoshop akhirnya hadir di browser, dan Chromebook Pengguna Google Chrome OS telah menunggu bertahun-tahun — dan bertahun-tahun, dan tahun, Adobe — untuk alat pengeditan gambar Photoshop standar industri untuk tersedia bagi mereka. Hari ini penantian itu akhirnya…
Steam Deck mengalami masalah stick drift — eh, tidak apa-apa GamesBeat Summit 2022 kembali dengan acara terbesar untuk para pemimpin dalam game pada 26-28 April. Pesan tempat Anda di sini! Berdasarkan banyak ulasan Steam Deck yang antusias, para penggemar semakin…
Rahasia Video FYP di Facebook: Taklukkan Algorithm… Tips Membuat Video FYP di Facebook: Strategi Ampuh untuk Menjangkau Lebih Banyak Penonton Apakah Anda ingin video Anda lebih sering muncul di Beranda Facebook? Jika ya, Anda perlu mengetahui tips…
Mari Kenali Ubuntu, Apa Saja Macam Jenisnya? Linux Ubuntu merupakan sistem operasi open source yang pertama kali dirilis pada tanggal 20/10-2004. Sistem operasi Linux Ubuntu berjalan di atas basis kode Debian Linux. Lalu, mengapa system operasi tersebut…
Cara Mengunduh Video YouTube YouTube dapat membantu bisnis dengan banyak cara. Dari keterampilan yang dapat Anda pelajari di YouTube hingga tren industri terbaru, ada banyak jenis video YouTube untuk dikonsumsi. Ukurannya sangat besar sehingga…
Jadi Anda Memiliki KYC Bitcoin — Sekarang Apa? Jika Anda telah menghabiskan waktu untuk menelusuri lubang kelinci bitcoin atau membeli bitcoin dari bursa, maka Anda telah menemukan istilah KYC (Kenali Pelanggan Anda). Anda juga kemungkinan besar berpartisipasi dalam…
3 Peringkas Teks Terbaik untuk Menulis Ringkasan… Intisari teks adalah salah satu alat utama dalam gudang penulis. Jadi mana yang terbaik untuk ringkasan konten yang akurat?apakah Anda tahu bahwa 84% perusahaan mempercayai kecerdasan buatan untuk memberi mereka…
Danielle Belton dari HuffPost melihat peran pemimpin… Ketika Danielle Belton mulai sebagai pemimpin redaksi HuffPost pada bulan April, dia masuk ke ruang redaksi yang telah menghabiskan satu tahun penuh gejolak. Selain cobaan meliput dan hidup melalui pandemi,…
Apple Diam-diam Menyertakan Fitur Luar Biasa di… IPhone 13 Pro memiliki beberapa fitur hebat yang sulit untuk dilewatkan. Sistem kamera, yang secara harfiah lebih besar dari sebelumnya, adalah salah satu contoh nyata. Tidak hanya lensa dan sensor…
Lain Kali Seseorang Berkata, 'Kami Mencoba Itu.… Apa pepatah lama tentang tidak berhasil pertama kali?Pada tahun 2019, perusahaan saya ThirdLove meluncurkan lokasi ritel fisik pop-up pertamanya-- dan hanya beberapa bulan kemudian COVID- 19 pandemi melanda. Karena pembatasan…
Apa Selanjutnya untuk Telehealth? Pendapat yang dikemukakan oleh kontributor Entrepreneur adalah milik mereka sendiri. Anda sedang membaca Entrepreneur United States, sebuah waralaba internasional dari Entrepreneur Media. Ketika kasus COVID-19 berkurang, dunia secara bertahap mengantarkan…
Jadi apa sebenarnya "metaverse" itu? Aurich Lawson | Getty ImagesSaat ini sepertinya semua orang dan perusahaan induk mereka perusahaan berbicara tentang "metaverse" sebagai hal besar berikutnya yang akan merevolusi kehidupan online kita. Tetapi setiap orang…
Mengapa Anda harus berbelanja Black Friday dan Cyber… Meskipun Anda dapat berbelanja online selama Black Friday atau hari libur menggunakan browser apa pun yang Anda inginkan, ada beberapa alasan bagus untuk menggunakan browser Microsoft Edge yang sudah ada…
Alat Kesehatan Terdekat: Menjaga Kesehatan Lebih Dekat Alat Kesehatan Terdekat: Menjaga Kesehatan Lebih Dekat Pendahuluan Sobat Sekitar, selamat datang dalam artikel yang akan membahas tentang alat kesehatan terdekat. Di tengah hiruk-pikuk kehidupan modern, kesehatan menjadi hal yang…
Bagaimana omicron memengaruhi data pekerjaan AS terbaru Seiring kasus covid-19 mulai menurun di AS, para ekonom melihat terlebih dahulu dampak varian omicron pada pemulihan pasar tenaga kerja. jumlah orang Amerika yang mengajukan pengangguran dalam pekan yang berakhir…
3 Peringkas Teks Terbaik untuk Menulis Ringkasan… Ringkasan teks adalah salah satu alat utama di gudang penulis. Jadi mana yang terbaik untuk ringkasan konten yang akurat?apakah Anda tahu bahwa 84% perusahaan mempercayai kecerdasan buatan untuk memberi mereka…
Hibah Usaha Kecil Menit Terakhir Tersedia pada tahun 2021 Hibah telah membantu banyak usaha kecil pulih dalam beberapa tahun terakhir. Namun masih banyak yang belum menyempatkan diri untuk melamar. Dan yang lain mungkin menganggap mereka tidak memenuhi kualifikasi.Namun, masih…
Di Nigeria, Pemadaman Facebook Mengungkapkan… Tomiwa Ibukunle, seorang pengusaha berusia 21 tahun di Lagos, Nigeria, memulai bisnis pakaian dan aksesorisnya dua bulan lalu. Dia menggunakan WhatsApp untuk mengiklankan produknya dan memproses pesanan dari pelanggan, biasanya…
Sensasi Lembut di Ujung Jari: Jelajah Keajaiban… Pernahkah Anda merasa kesal ketika membuat kesalahan saat menulis di atas kertas? Mungkin Anda mencoba untuk mengoreksinya dengan menggunakan penghapus, tetapi itu hanya membuat tulisan Anda terlihat berantakan. Jika ya,…