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:
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,…
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…
Pertanyaan Umum tentang Kanker Endometrium:… Selamat datang di blog kami yang membahas pertanyaan umum tentang kanker endometrium. Kanker endometrium adalah salah satu jenis kanker yang mempengaruhi lapisan rahim. Dalam artikel ini, kami akan menjawab beberapa…
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…
Armbie – Selempang Penopang Lengan Ganda untuk… Kapanpun Anda sedang duduk di rumah atau saat bepergian, menggunakan smartphone atau membaca buku bisa membuat tangan Anda lelah bahkan terkadang mati rasa, apalagi jika Anda melakukannya dalam waktu lama.…
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…
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…
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…
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…
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…
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…
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…
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…
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…
TIPS DAN TRIK LIPAT SAMSUNG Z FOLD 5 : CARA… Tips Penting untuk Pemakai Samsung Galaxy Z Fold 5 yang Ingin Perangkatnya Tetap Awet Samsung Galaxy Z Fold 5 merupakan salah satu ponsel lipat terbaik di pasaran saat ini. Namun,…
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…
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…
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…
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…
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…
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…
Harga Internet Starlink di Indonesia Harga Internet Starlink di Indonesia Sobat Sekitar, Apa Kabar? Salam hangat untuk Sobat Sekitar! Internet telah menjadi kebutuhan penting di era digital ini. Salah satu inovasi terbaru adalah Starlink, layanan…
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?…
Globalisasi ekonomi setelah Ukraina Dalam tiga bulan sejak Rusia menginvasi Ukraina, kita telah melihat Amerika Serikat, Uni Eropa, dan ekonomi lainnya bergerak maju bersama untuk menjatuhkan sanksi ekonomi paling komprehensif terhadap Rusia dalam sejarah…
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…
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…
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…
DOS pada Dope 06 September 2010 html, , blog, keamanan, [code], sysadmin, produktivitas, sql, css, baris perintah, fungsional Tahun Baru, Penjualan On Rails.... Ketika Anda sudah mencapai batas Haskell di atas Kuda... Jika…
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…
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…