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:
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…
Clubhouse memiliki Mode Musik baru yang dapat… Clubhouse memiliki persaingan yang sangat besar dari perusahaan besar yang ingin memiliki ruang audio langsung, tetapi mungkin akan unggul dalam satu cara tertentu. Perusahaan meluncurkan Mode Musik baru yang dapat…
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…
Seni Menggambar Wajah dalam Psikotes: Kunci Membaca… Pernahkah Anda merasa kesulitan saat menggambar orang dalam tes psikologi? Jika ya, Anda tidak sendirian. Banyak orang yang merasa kesulitan dalam menggambar orang, terutama jika mereka tidak memiliki dasar menggambar…
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 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…
Ada Perbedaan Antara Cepat dan Tepat Waktu Waktu adalah sumber daya yang paling langka dalam hidup kita. Data mungkin merupakan minyak ekonomi digital, tetapi ketepatan waktu dan pengiriman kontekstual dari data itulah yang menciptakan nilai nyata. Salah…
Apakah predisposisi genetik memengaruhi kesehatan Anda? Itu adalah salah satu postingan Facebook yang menarik perhatian Angela*. Wanita berusia 36 tahun ini telah mempertimbangkan pengujian genetik selama bertahun-tahun - sejak saudara perempuannya didiagnosis menderita kanker payudara dan…
Tips untuk menjual Google Pixel 7 Pro Anda Penting untuk dicatat bahwa apakah Anda menjual Pixel 7 tergantung pada keadaan dan kebutuhan Anda masing-masing. Namun, ada beberapa alasan mengapa seseorang mempertimbangkan untuk menjual perangkatnya. Misalnya, jika seseorang ingin…
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…
Deshaun Watson Mengajukan Deposisi ke-5 Sepanjang… Carmen Mandato/Getty ImagesBottas : La, 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…
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 (Kerugian tidak permanen). Anda juga kemungkinan besar berpartisipasi dalam…
"Deltacron" mungkin adalah kesalahan lab, bukan varian baru Infeksi virus corona terkait varian omicron covid-19 terus melonjak. Di AS, rawat inap mendekati rekor tertinggi, dan pejabat di China melaporkan kasus omicron pertama yang diketahui di sana pada 9…
Meta menutup sistem pengenalan wajah Facebook Menerima pembaruan Facebook Inc gratisKami akan mengirimi Anda myFT Daily Digest pembulatan email up berita Facebook Inc terbaru setiap pagi.Meta akan menutup sistem pengenalan wajah Facebook dan menghapus data yang…
AI Percakapan: Cara Kerjanya dan Ke mana Arahnya Chatbots saat ini cenderung canggung dan bahkan menyakitkan untuk digunakan, terbatas pada menjawab serangkaian pertanyaan sederhana -- seringkali salah. Tetapi bagaimana jika chatbot dapat dirancang untuk mendukung tugas yang lebih…
Bagaimana cara meminta majikan Anda untuk menanggung… Jika Anda mengalami obesitas, mendapatkan perawatan dan dukungan lain yang layak Anda dapatkan bisa jadi sulit. Asuransi mungkin tidak mencakup semua perawatan terbaru atau program khusus. Biaya Anda dapat meningkat…
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…
Menemukan Pegawai Negeri Sipil yang Tepat: Kunci… Mencari Nama Pegawai Negeri Sipil: Panduan Lengkap dan Mudah Sebagai calon pegawai negeri sipil, tentunya Anda ingin mengetahui cara mencari nama pegawai negeri sipil yang tepat. Proses ini memang tidak…
Resident Evil 2, 3, Dan 7 Sedang Diupgrade Untuk PS5… Oleh Rob Rich/2 Maret 2022 19:38 EST Akun Twitter resmi "Resident Evil" telah meluncurkan rencana untuk menghadirkan "Resident Evil 7," bersama dengan remake generasi sebelumnya untuk "Resident Evil 2" dan…
Rumah Frank Lloyd Wright Langka di Atherton, CA,… Saat Anda menjelajah, sesuatu tentang browser Anda membuat kami berpikir Anda mungkin bot. Ada beberapa alasan mengapa hal ini mungkin terjadi, termasuk: Anda adalah pengguna yang kuat yang bergerak melalui…
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…
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…
Influencer dalam SEO hari ini Ringkasan 30 detik: Dengan pencarian yang semakin canggih, akan ada hubungan yang kuat antara sinyal pengguna dan influencer Model Terpadu Multitask (MUM) Google dan model AIDA (Attention, Interest, Desire, Action)…
Kernel GPU Umum Julia memiliki perpustakaan bernama CUDAnative, yang meretas kompiler untuk menjalankan kode Anda di GPU. menggunakan CuArrays, CUDanatif xs, ys, zs = CuArray(rand( 1024))), CuArray(rand(1024)), CuArray(nol(1024)) fungsi kernel_vadd(keluar, A, B) Saya…
6 Hal yang Telah Dipelajari oleh Pod CX tentang… Selama bertahun-tahun, istilah-istilah seperti keseimbangan “perawatan diri” dan “kehidupan kerja” sering kali terasa seperti basa-basi. Namun saat pandemi ini Ada Hiruk-pikuk Beli, hal itu membuat pengawasan yang lebih ketat tentang…
Grady Hillhouse: Mengapa Tembok Penahan Runtuh Pada bulan Maret 2021, proyek konstruksi yang sudah berjalan lama di persimpangan jalan raya New Jersey terhenti ketika salah satu dinding penahan di sepanjang jalan itu runtuh. Proyek di Camden…
Monorepo: Mengenal Konsep, Keuntungan, dan… Selamat datang di blog kami yang membahas tentang monorepo. Dalam dunia pengembangan perangkat lunak, monorepo adalah konsep yang semakin populer dalam pengelolaan kode sumber. Pada blog ini, kami akan menjelaskan…
Dengan 3 Kata, Apple Baru Mengumumkan Kembali ke… Pada hari Rabu, Apple mengumumkan bahwa mereka sekali lagi akan menunda rencananya untuk membawa karyawan kembali ke kantor. Ini bukan pertama kalinya, dan Apple bukan perusahaan pertama yang menunda rencana…
Foto Gizmodo dari kebocoran besar iPhone 4 telah menghilang Foto-foto dari momen bersejarah dalam sejarah berita teknologi, pada hari seorang reporter Gizmodo menerbitkan foto-foto langsung saat itu- iPhone 4 yang belum diumumkan, sekarang hilang. Dan mereka tidak sendirian —…
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…