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:
Alexander Volkanovski tentang Dan Hooker kembali di… PhotoCred: Facebook - Dan HookerDan Hooker mungkin kembali ke divisi lamanya yang berbobot 145 pon, di mana rekan setimnya, Alexander Volkanovski, berkuasa sebagai juara.Ini bukan pertama kalinya Hooker bertarung di…
Apa Saja Keuntungan menggunakan Linux Ubuntu? Begini… Sistem operasi open source yaitu Linux Ubuntu adalah suatu yang sangat direkomendasikan untuk sistem operasi PC. Linux Ubuntu memiliki sejumlah manfaat atau beberapa keuntungan bagi pengguna yang menginstal Ubuntu. Keuntungan…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
"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…
'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…
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…
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…
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 —…
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…
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…
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…
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…
Alat Kelamin Lumba-Lumba: Mitos dan Fakta yang Perlu… Alat Kelamin Lumba-Lumba: Mitos dan Fakta yang Perlu Diketahui Pengantar: Mengenal Lebih Dekat Alat Kelamin Lumba-Lumba Halo, Sobat Sekitar! Selamat datang kembali di artikel jurnalistik kami yang kali ini akan…
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…
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…
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…
'Bagaimana kita mulai mengubah merek ini':… Berharap untuk mendapatkan keunggulan kompetitif dan menjangkau pembeli yang lebih muda, merek buket buah segar yang berbasis di Atlanta, Edible Arrangements, memikirkan kembali strategi pemasaran dan campuran medianya untuk memasukkan…
Rumble: Platform Video Alternatif yang Sedang Naik Daun Hipoparatiroidisme adalah kondisi medis yang jarang terjadi, tetapi dapat berdampak besar pada kesehatan. Dalam artikel ini, kita akan membahas tentang Rumble, sebuah platform berbagi video yang semakin populer sebagai alternatif…
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…
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…
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,…