ฉันมี div แบบธรรมดาและฉันต้องการให้ความสูงของ div เป็นขนาดตัวอักษรของเนื้อหา ดังนั้นฉันจึงพยายามตั้งค่าความสูง ความสูงของบรรทัด และขนาดตัวอักษรเป็นค่าเดียวกัน แต่ดูเหมือนว่าความสูงขององค์ประกอบไม่คาดว่าจะอยู่ที่ 150px คุณสามารถดูได้บนหน้าจอด้านล่าง มันคือส่วนหัวในกรอบสีแดง
จะทำให้มีแบบอักษรที่มีความสูงเท่าความสูงของกล่องได้อย่างไร
ดังนั้นปัญหาคือแบบอักษรจะมีช่องว่างด้านบนและด้านล่างเสมอ ขึ้นอยู่กับแบบอักษรและไม่ได้ระบุไว้ที่ไหนสักแห่ง ดังนั้น ทางที่ดีที่สุดคือใช้ขนาดฟอนต์ที่ถูกต้อง จากนั้นปรับความสูงของบรรทัดให้เล็กลงจนกว่าคุณจะได้ผลลัพธ์ที่ต้องการ
คำตอบสำหรับคำถามเดียวกันที่คุณจะได้รับ ที่นี่
วิธีลบพื้นที่ด้านบนและด้านล่างออกคือ ที่นี่
คุณสามารถลองวิธีแก้ปัญหาต่อไปนี้ด้วย CSS
HTML:
<div class="container">
Stackoverflow
</div>
ซีเอสเอส:
.container {
display: flex;
align-items: center;
background-color: #222222;
color: #f7f7f7;
text-transform: uppercase;
height: 100px;
font-size: calc(100px * 1.45);
}
ลิงก์ทดสอบ: https://codepen.io/shervinmr/pen/wvaaEvg
