Tinggi CSS + tinggi garis + ukuran font

Saya memiliki div sederhana dan saya ingin memiliki tinggi div sebagai ukuran font kontennya. Jadi saya mencoba mengatur tinggi, tinggi garis, dan ukuran font ke nilai yang sama tetapi tampaknya tinggi elemen tidak diharapkan 150px. Anda dapat melihatnya pada layar di bawah ini. Itu adalah header dalam bingkai merah.

masukkan deskripsi gambar di sini

Bagaimana cara mencapai font setinggi tinggi kotaknya?


css height font-size
person Čamo    schedule 11.02.2020    source sumber

Jawaban (2)


arrow_upward
1
arrow_downward

Jadi masalahnya adalah font selalu menyertakan beberapa spasi di atas dan di bawah. Ini didasarkan pada font dan tidak ditentukan di suatu tempat. Jadi pilihan terbaik Anda adalah menggunakan ukuran font yang tepat, lalu sesuaikan tinggi garis lebih kecil hingga Anda mendapatkan hasil yang diinginkan.

Jawaban untuk pertanyaan yang sama bisa Anda dapatkan di sini

Sedikit peretasan untuk menghilangkan ruang atas dan bawah adalah di sini

person Stefan F.    schedule 11.02.2020
comment
Jadi ukuran font spesifik untuk setiap jenis font dan tidak cocok dengan nilai css. Ok terima kasih. - person Čamo; 11.02.2020

arrow_upward
-1
arrow_downward

Anda dapat mencoba solusi berikut dengan CSS.

  • 100px adalah tinggi yang Anda inginkan
  • 1.45 harus diperbaiki untuk setiap fontfamily.

HTML:

  <div class="container">   
      Stackoverflow  
  </div>

CSS:

.container {
  display: flex;
  align-items: center;
  background-color: #222222;
  color: #f7f7f7;
  text-transform: uppercase;
  height: 100px;  
  font-size: calc(100px * 1.45);  
}

Tautan pengujian: https://codepen.io/shervinmr/pen/wvaaEvg

person Shervin Mirostovar    schedule 11.02.2020
comment
Jika saya meminta css jangan tarik scss ke jawabannya. - person Čamo; 11.02.2020