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:
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…
Selamat datang di DataDecisionMakers 1 November 2021 14:26 Apa yang dimaksud dengan bagian DataDecisionMakers baru VB? DataDecisionMakers adalah sisi komunitas dari VentureBeat. Di sinilah para ahli, termasuk orang-orang teknis yang melakukan pekerjaan data (ilmuwan…
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…
Ruang Kantor Terbuka Bukan Hanya Mode Manajemen… "It's Official: Open-Plan Offices Are Now the Dumbest Management Fad of All Time" adalah judul utama postingan viral rekan Inc. Geoffrey James dari tahun 2018. Jelas James bukan penggemar ruang…
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…
Bagaimana cara memilih video game yang tepat untuk Anda? Ketika kebanyakan orang berpikir tentang video game, mereka memikirkan remaja yang duduk di depan layar komputer dan televisi memainkan game aksi kekerasan yang menyemburkan darah dan daging saat karakter mereka…
Cara Menghasilkan Uang di Media Untuk puluhan ribu produsen konten ketika mereka mulai menulis, Medium adalah platform yang aman dan ramah pengguna untuk menerbitkan artikel. Hari ini ada lebih dari itu. Penerbit konten sekarang juga…
[GRATIS] PPT Sejarah Indonesia Kelas 11: Jelajahi… Tahukah kamu bahwa belajar sejarah Indonesia kelas 11 bisa lebih menyenangkan dengan menggunakan presentasi PowerPoint (PPT)? Dengan menggunakan PPT, kamu bisa membuat materi pelajaran lebih menarik dan mudah dipahami. Apakah…
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)…
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…
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…
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…
GadgetKlip – pengatur kabel dan kabel universal… Jika pekerjaan Anda melibatkan bekerja di meja, maka Anda harus tahu betapa pentingnya menjaga ruang meja Anda tetap bersih dan teratur. Dengan menjaga meja Anda tetap teratur, Anda menciptakan lingkungan…
"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…
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…
Mixer Digital: Membawa Kualitas Suara yang… Mixer digital telah menjadi perangkat yang penting dalam produksi musik modern. Dengan teknologi yang terus berkembang, mixer digital menyediakan berbagai fitur dan kemampuan untuk menciptakan kualitas suara yang profesional. Dalam…
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…
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 Pengontrol Cerdas Linxura. Lalu, mengapa system operasi tersebut dinamakan Ubuntu?…
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…
Diuji: StartAllBack memperbaiki apa yang kami benci… Windows 11 memiliki beberapa titik kasar. Tapi untuk pengguna listrik, tidak ada yang lebih kasar dari antarmuka baru, khususnya pendekatan baru Microsoft untuk menu Start dan taskbar. Apa yang telah…
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…
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…
'Ada tujuh kasus di berbagai lantai minggu… Hearst adalah salah satu dari sedikit perusahaan media besar yang mulai mewajibkan karyawannya untuk datang ke kantor pada akhir tahun lalu, sebelum memberlakukan kembali kebijakan kerja yang fleksibel bulan ini.…
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…
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…
GeForce Now membuka tingkat RTX 3080 untuk semua… Nvidia Tidak ada tanda-tanda bahwa kekurangan kartu grafis akan segera berakhir. Karena itu, lebih dari beberapa gamer beralih ke alternatif bermodel baru untuk perangkat keras pembangkit tenaga listrik lokal: streaming…
Marketing Briefing: 'Melewati… Iklan hilang tetapi dampaknya terhadap iklan masih belum diketahui. Banyak pertanyaan: Apakah ini akan mengubah seberapa cepat pengiklan — yang dikenal sebagai penghindar risiko dan bergerak lambat — bergerak? Akankah…
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…
Bagaimana Sistem Kesehatan AS Dapat Membangun… Pandemi telah menyoroti masalah utama dalam perawatan kesehatan AS: Fasilitas fisiknya tidak siap untuk menghadapi lonjakan permintaan. Tetapi inovasi yang diuji sebelum dan selama pandemi menunjukkan bahwa ada cara untuk…
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…