Make sure the text fits perfectly without any extra spaces

When working with CSS/HTML, I noticed that using a simple text within a div without any margin or padding, and specifying a font-size of 36px with a line-height also set to 36px doesn't fit perfectly - there is always some spacing at the top of the line. By reducing the line-height by 20% (to around 29.8), I was able to achieve the desired effect.

I'm curious as to why this happens. Is there something related to browsers that I might be overlooking? I initially thought that setting the line-height equal to the font-size would eliminate any extra spacing around a line.

Update: It turns out that the spacing issue I am experiencing is known as "half-leading". Despite setting the line-height to match the font-size, browsers still calculate half leading which results in some additional spacing.

Update 2: I came across information in the CSS specification detailing line-height: http://www.w3.org/TR/CSS2/visudet.html#line-height. However, I'm still puzzled about how to prevent the inclusion of ascender/descender spacing altogether.

Answer №1

In response to the second update you provided:

It's interesting to note that ascender/descender height varies depending on the font used, with some fonts not even having ascenders or descenders at all, such as all caps monospace fonts. Simply using text-transform: capitalize wouldn't solve this issue if the font doesn't include any characters with ascenders/descenders.

While it may be a bit of a workaround, as you mentioned, it seems like this limitation is more of a feature than a bug in this case.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for aligning a select and select box when the position of the select has been modified

Recently, I encountered an interesting issue with the default html select element. When you click on the select, its position changes, but the box below it fails to adjust its position accordingly. https://i.stack.imgur.com/SwL3Q.gif Below is a basic cod ...

I'm facing an issue with my LAMP stack where the image appears when I access it through a URL, but doesn't seem to load when I try to load it using jQuery

My PHP file is located at path/renderer/renderImage.php and it generates a PNG image that displays correctly in the browser when I visit the URL directly. However, when I try to load this image into a DIV using jQuery from path/index.html with the followin ...

How can I create a box-shaped outline using Three.js?

As someone new to threejs, I have been trying to figure out how to render a transparent box around a symbol in my canvas. The box should only display a border and the width of this border should be customizable. Currently, I am using wireframe to create a ...

Is there a way to trigger the opening of a jQuery-UI-Selectmenu dropdown using the 'ENTER' key instead of the 'SPACE' key as indicated in the documentation?

I'm currently working on implementing jQuery-UI-Selectmenu to create a dropdown feature. As per the API documentation for select menu available at https://api.jqueryui.com/selectmenu/, it mentions that the 'SPACE' key can be utilized to ope ...

Transferring a Variable from Arduino to JavaScript

Is there a simple way to pass an Arduino variable as a JS variable? Let's say we have an integer Arduino variable called sensorData: int sensorData = analogRead(sensorPin); How can we transfer this value to a JavaScript variable? client.println(&quo ...

Unable to conceal a div element on mobile devices

Creating a unique bootstrap theme for Wordpress and encountering an issue with hiding the "sptxt" text on mobile screens. <div class="row"> <div class="col-lg-5 col-sm-12"><div id="gr"></div></div> <div class="col- ...

Spacing for Bootstrap Navbar List Items

I've searched through the CSS and I'm unable to identify what is causing the width between the top level links on my navbar. I need them to be slightly smaller so that when it adjusts for a screen below 900px, it doesn't convert into a 2-row ...

Expanding the padding within a box results in an increase in the overall height of the table row that encapsulates it

My goal is to create a table displaying marks with a box around each mark that expands slightly when hovered over to indicate activity. Below is the code I am using: .container { position: absolute; width: 80%; left: 50%; transform: translateX(-5 ...

Output in Typescript for the chosen option

A message can be sent based on the user's choice of either Now or Later. If the user selects Now, the message will be sent immediately. If Later is chosen, a date format option needs to be created for setting a future date. <label for=""& ...

Issue with the read more button inoperative for two specific paragraphs

Upon trying to implement 2 or more "Read More" buttons on my website for users to view snippets of content before downloading, I encountered an issue with the functionality only working on the first paragraph and not the subsequent ones. Despite ...

Padding for the initial element in a carousel display

I am currently working on implementing owl carousel with stage padding. My goal is to use the carousel with loop:false, and have the first item displayed without left padding, while maintaining consistent padding for both items on the left and right after ...

Shade the tag when the checkbox is marked

Is it possible to change the color of a label without using javascript when the associated checkbox is checked? ...

Pattern matching for replacing <a> tags

As a beginner in the world of regular expressions, I am eager to learn more about it. Currently, my goal is to extract only the inner text from an HTML tag and remove the surrounding tags. For example: Original: Lorem ipsum <a href="http://www.google.e ...

Click the button to save the text to your clipboard with a customized

Can anyone suggest a method for duplicating div text using JavaScript while preserving the style attributes (italics, font family, size, etc.)? My goal is to paste the copied text into Word and have it maintain the same appearance as on the webpage. For e ...

Adjust the width of an HTML input using the Bootstrap 5 form-control class

Is it possible to set the width of an input using Bootstrap's form-control or input-group classes? In the example below, each input should have a width based on its maxlength attribute: <link href="https://cdn.jsdelivr.net/npm/<a href="/cd ...

Steps for implementing remote modals in Bootstrap 5 using CS HTML

I'm attempting to implement a remote modal window in Bootstrap 5 with C# MVC. The endpoint for the modal partial view is configured correctly. According to this discussion on Github, all that needs to be done is to call some JavaScript. However, it ...

CSS transformation on the go

Can anyone help me? I am trying to create an animation for a hamburger menu when checked and unchecked. I have managed to animate the menu, but I'm struggling with animating the left menu when transforming it to 0. &__menu { transform: transla ...

Mysterious anomaly observed: Peculiar trajectory detected in canvas image during left

I have a fascinating HTML5 Canvas that showcases the movement of two identical objects to both the right and the left. Although the right side operates flawlessly, I've noticed that the left object leaves behind an intriguing trail with a hint of gree ...

Combining Node and React: Using CSS Class Names with Hyphens

Currently, my project utilizes react-starter-kit and includes several react components, each with its own styling file (scss). Every component imports the styling file at the top like this: import s from './Header.scss'; When it comes to using ...

Accelerate loading times of HTML files on Android apps

After clicking on an image, I want the corresponding HTML page to load instantly. However, there is a delay of a few seconds before the page actually appears. How can I reduce or eliminate this waiting time and ensure that the page loads as quickly as po ...