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:
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…
Ray Cooper III, Magomed Magomedkerimov memasuki… FORT LAUDERDALE, Fla. – Mungkin Ray Cooper III harus merasakan motivasi ekstra menuju final kelas welter Kejuaraan PFL 2021 melawan Magomed Magomedkerimov. Bagaimanapun, itu adalah Magomedkerimov (29-5) yang menyangkal Cooper…
Rilisan Marketo Maret '22: Ayo ngobrol Salah satu cerita terbesar dari rilis terbaru Marketo adalah rencana masuknya mereka ke dunia perangkat lunak obrolan. Ini bukan perusahaan pertama dalam setahun terakhir yang masuk ke ruang perangkat lunak…
5 konsekuensi negatif dari hosting yang buruk Jika Anda memulai bisnis dan berencana membeli hosting web Ulasan Pixel 6:, pertimbangkan kerugiannya sebelum Anda mengalaminya secara langsung. Hosting yang buruk memiliki banyak kelemahan – artikel ini menyoroti lima…
Bagaimana pengiklan menggunakan DCO untuk membuat… Bukan rahasia lagi bahwa CTV telah menjadi sangat populer dalam beberapa tahun terakhir, dan tidak ada tanda-tanda momentumnya akan melambat dalam waktu dekat. Pada saat yang sama, DCO, pengoptimalan materi…
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)…
GeForce RTX 3090 vs. RTX 3080 Ti vs. Radeon 6900 XT:… Ini adalah pertarungan GPU tingkat dewa selama berabad-abad. RTX 3090 yang perkasa menyambut saudara-saudaranya RTX 3080 Ti untuk bersaing dengan AMD RX 6900 XT. Memar ini besar, mahal, dan sangat…
Dompet kripto USB terbaik Dompet cryptocurrency perangkat keras adalah salah satu cara paling aman untuk menyimpan aset digital Anda. Mereka adalah perangkat kecil yang terpasang pada komputer atau tablet mana pun untuk mengirim pembayaran,…
7 Wawasan Kepemimpinan yang Mengarah Pada Kemenangan… Selama bertahun-tahun dalam bisnis, baik sebagai profesional maupun pengusaha, saya selalu berharap mengetahui rahasia sukses. Meskipun saya tidak pernah dapat menentukan satu pun, saya telah mengumpulkan beberapa wawasan yang saya…
MODL Outdoors Infinity Tool - Carabiner dan tali… Jika Anda adalah seseorang yang senang menjelajahi alam bebas, maka Anda mungkin tahu bahwa peralatan Anda harus selalu siap selama Anda bertualang. Nah, untuk bisa membawa semua perlengkapannya ke luar…
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…
'Harry Potter: Wizards Unite' akan ditutup… Niantic mengakhiri dukungan untuk Harry Potter: Wizards Unite. Studio mengumumkan hari ini akan menutup game AR pada 31 Januari 2022. Menjelang matahari terbenam, ia berencana untuk menghapus judul dari App…
Apakah saya berisiko terkena penyakit parah akibat COVID-19? Pandemi COVID-19 telah berakhir, namun virusnya belum hilang. Saat ini tidak banyak orang yang sakit karena vaksin telah tersedia, namun infeksi masih dapat menyebabkan penyakit serius – dan bahkan kematian…
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…
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…
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…
Lupakan Fleksibilitas. Karyawan Anda Menginginkan Otonomi. Fleksibilitas sekarang mendominasi cara kita berbicara tentang masa depan pekerjaan. Dan sementara survei kerja hibrida baru menunjukkan bahwa karyawan memang menginginkan fleksibilitas, itu juga menunjukkan bahwa fleksibilitas ini bergantung pada…
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…
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…
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…
Bagaimana Orang yang Cerdas Secara Emosional… Baru-baru ini, saya dan istri berselisih paham. Itu bukan tentang konsekuensi apa pun, tetapi itu adalah percakapan yang penuh gairah. Pada satu titik, istri saya menunjukkan bahwa dia tahu lebih…
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…
CVS Pharmacy sekarang menawarkan label resep audio… Menyusul uji coba pada tahun 2020 yang melibatkan 1.700 lokasi di seluruh AS, CVS memperluas ketersediaan label resep audio Spoken Rx ke 10.000 apotek di seluruh negeri. Fitur aksesibilitas tersedia…
Kini Melonjak Lagi Kasus Corona di RI Capai 14.518 Kasus covid-19 harian kini kembali mencetak jumlah tertinggi. Kementeian kesehatan pada tangal 30 Januari melaporkan adanya suatu penambahan yaitu 14.518 kasus baru dalam sehari. Diketahui orang-orang memiliki suatu respons yang…
bestonlinecasinoontario.ca baru saja diluncurkan dan… Aman untuk mengatakan bahwa kasino online adalah hal besar di Kanada saat ini. Namun, seperti halnya di AS, undang-undang untuk situs web kasino online Kanada mungkin sedikit berbeda untuk setiap…
Berkat Orang Tajir Elon Musk, Clubhouse Naik Daun.…  Media sosial Clubhouse kini sedang naik daun dalam beberapa hari terakhir karena pengaruh orang terkaya sedunia yaitu Elon musk. Bulan Februari awal 2021, Elon Musk mengadakan sesi diskusi dengan beberapa…
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…
Fauci: Pil Covid-19 yang Mungkin Mengubah Permainan… Topline Dr. Anthony Fauci memuji pil antivirus Covid-19 Pfizer yang akan segera disetujui sebagai "sangat penting" untuk mengakhiri pandemi, tetapi memperingatkan bahwa pil itu tidak akan tersedia secara luas selama…
Blue Horizon, Tempat NFT Bertemu DeFi Oleh Mark Hunter4 jam yang laluKamis 18 Nov 2021 14:06:32 Waktu Membaca: 2 menit Blue Horizon adalah generasi berikutnya dari platform NFT dan memiliki IDO-nya pada hari SeninPlatform ini adalah…
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…