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:
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…
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…
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…
"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…
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…
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…
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…
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…
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 —…
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…
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…
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…
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 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…
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…
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…
Permainan Kartu Kasino Crypto Populer yang Dapat… Kasino online harus memiliki banyak pilihan permainan yang tersedia untuk menarik pemain baru ke platform taruhan. Akibatnya, banyak kasino online menawarkan berbagai jenis permainan kasino dalam pilihan permainan mereka. Kasino…
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…
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.…
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…
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…
Pixel 6 dan Pixel 6 Pro akan hadir dengan pembaruan… Dengan asumsi Anda berhasil memesan Pixel 6 atau Pixel 6 Pro, maka Anda harus tahu bahwa setelah ponsel ada di tangan Anda, Anda akan memerlukan sedikit waktu ekstra untuk menyiapkan…
Di mana membeli APIX sebagai token yang bertujuan… Koin APIX naik 162% dalam 24 jam terakhir dan dapat reli lebih tinggi jika aksi volume berlanjut di masa mendatang Token APIX telah mengalami kenaikan harga yang kuat dalam 24…
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…
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…
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…
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…
Danielle Belton dari HuffPost melihat peran pemimpin… Ketika Danielle Belton mulai sebagai pemimpin redaksi HuffPost pada bulan April, dia masuk ke ruang redaksi yang telah menghabiskan satu tahun penuh gejolak. Selain cobaan meliput dan hidup melalui pandemi,…
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…
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…