What is the reason behind HTML5 disregarding line-height values that are smaller than the font-size


I am in the process of switching some pages to HTML5 and have encountered an issue with setting headlines with a very small line height. Ever since , any line-height below the font-size seems to be ignored. I can space them out as much as I want, but cannot bring them closer together. Does anyone know why this happens and if there is a solution for it?
Thank you, Thomas

Edit: I found the solution. In my old markup, I used 

<a style="line-height:12px;" href="#">something</a>
which worked in XHTML 1.0 transitional but not in HTML5.
I changed it to 
<div style="line-height:12px;"><a href="#">something</a>
and that fixed the issue!
Thank you!

htmlcss

Answer №1

When using the <a> tag in HTML5, it is important to note that inline elements defer to its parent 'block' element's line-height ( or all the way up to the <body> style if that is the immediate parent ).

To illustrate this point further:

body { line-height:20px; } 
a { line-height:12px; }

Consider the following markup:

<body>
    <a href="#">test</a>
</body>

In this scenario, the <a> tag will have a line-height of 20px instead of 12px.

If you try to set a specific line-height for an 'inline' 

<a style="line-height:12px;" href="#">something</a>
, it may not work as expected. However, wrapping the element in a 'block'-level <div> can dictate the line-height successfully.

An alternative approach without adding extra markup is to use CSS to make the <a> tag display as 'inline-block'.

Simply add the following style to your 

<a style="display:inline-block; line-height:12px;" href="#">something</a>
.

For even better organization, assign a class to your <a> tag (replace 'xx' with a descriptive class name):

<a class="xx" href="#">something</a>

Then in your CSS file, define the class to display as 'inline-block':

.xx { display:inline-block; line-height:12px; }

I hope this explanation proves helpful.

Answer №2

Are you in need of some code assistance? Do you find yourself dealing with unnecessary padding or margins?

This solution has been tested successfully on Firefox, Chrome, as well as IE8.

<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:18px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>

Answer №3

To the best of my knowledge, each block-level element contains a hidden "strut" character with a width of 0 that affects the calculation of the line box's height. If the children's line-height is smaller than that of the parent element, it appears that the children's line-height is disregarded as the parent element's line-height takes precedence in supporting the line box.

Answer №4

To achieve proper text size in IE8 and IE7 with a line height of 30px, using em is necessary as they do not share the same line height as Chrome and FF.

<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>

Using em ensures consistent line height across all browsers, even though it may seem outdated. It is still recommended to use until older versions like IE8 are no longer relevant.

<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:0.2em;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>

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

When utilizing EJS to populate the source attribute with an empty value, the image source cannot be located

I'm currently working on saving image names to a database and then using those names to display the images on a webpage. However, I've run into an issue when it comes to displaying the images in HTML! In the database, the information looks like ...

htmlnode.jsexpressserverejs

"Implementing a responsive design with a background image and radial gradient - how to

The image currently in use: https://i.stack.imgur.com/piK6l.jpg Here is how I've implemented it using Vue.js, Bootstrap, and CSS: Code Snippet <div class="landing"> <div class="container text-white details h-100"> ...

htmlcssvue.jsbootstrap-4radial-gradients

Activate a CSS class on click using JavaScript

Having a bit of trouble as a beginner with this. Any help would be much appreciated. This is the code in question: HTML: <div class='zone11'> <div class='book11'> <div class='cover11'></d ...

javascriptjquerycssanimationonclick

Utilizing a robot browser through Selenium WebDriver opens up possibilities for browsing various types of HTML content that may

While attempting to parse a webpage using Python Selenium Webdriver, I encountered an unusual discrepancy in the HTML content. The content differs when accessed through a robot browser compared to a human browser. For instance, here is a snippet of the we ...

pythonhtmlseleniumweb-scraping

line of checkboxes aligned horizontally with the help of Bootstrap

My goal is to create a horizontal row of checkboxes within a form. I've been able to achieve a functional but unattractive version by using the following code: div.form-group(ng-show = 'avariable') label 1 input(type = 'checkbo ...

htmlcsstwitter-bootstrapcheckbox

Adjusting dimensions in the xaml code

Just starting out with Wpf applications and I've come across this interface: <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Alg="clr-na ...

c#css.netwpfxaml

What is the best way to resize an image in HTML based on a percentage of its height?

Within my HTML code, I have a PNG image that has been adjusted in size using CSS: .adjust-image { border:1px solid #021a40; display: block; width: auto; max-width: 100%; max-height: 1000px; } .img-container { position: relative; } ...

htmlcssimage

The XmlUtil.serialize(root) function is converting empty tags into self-closing tags

Check out this cool code snippet featuring an empty div tag (<div></div>): import groovy.xml.DOMBuilder import groovy.xml.XmlUtil def HTML_STRING = ''' <html> <div></div> <div>Some text</d ...

htmlxmlgroovyxhtml

Adjust the CSS for the "a" tag's "title" attribute

I am using jquery.fancybox to create an image modal on my website. I have noticed that I can add a description using the title attribute. However, when the description is too long, the text is displayed on a single line and some of it disappears. How can ...

javascriptjqueryhtmlcssangularjs

CSS or Coding? Learn how to display items side by side instead of on top of each other

Hey there! I manage a music website that is currently in beta. I'm running into an issue with the way the music results are appearing in the bottom player - they're all stacked on top of each other instead of being listed side by side. I've ...

htmlcss

Expand and collapse dynamically while scrolling

// Closing Button for Main Navigation $('button#collapse-button').click(function () { $('nav#main-nav').toggleClass('closed'); }); $(window).on('scroll', function () { if ($(wind ...

javascriptjqueryhtmlcssscroll

Guide on displaying only one v-menu when clicking to reveal the menu

I have implemented the v-for loop on v-menu and I am attempting to trigger the v-menu to open using only the button. My goal is to open one menu at a time when the button is clicked. Currently, all buttons are being displayed simultaneously because the v- ...

javascripthtmlvue.jsvuetify.js

Utilizing PHP to create an interactive website

As a novice PHP developer, I took to Google in search of tutorials on creating dynamic PHP websites. What I found was that many tutorials used the $_GET variable to manipulate URLs and make them appear like this: example.com/?page=home example.com/?page= ...

phpjavascripthtmlcss

Unable to get CSS transition to function properly within Chrome Extension

I am currently attempting to create an effect where the word "credits" expands to reveal the credits when hovered on in a Chrome Extension. However, I am encountering difficulties in getting it to work properly. Here is the CSS code I have used for hand ...

htmlcssgoogle-chrome-extension

What is the best method to prevent next.js components from overlapping one another?

I recently created a website using next.js and noticed an issue in my index.js file. There is a div that houses the main components of the site: class Page extends Component { render() { return ( <div className={styles.container}> ...

javascripthtmlreactjsnext.js

Verification symbols in Unicode

I'm on the hunt for a universal checkmark symbol that is compatible across various operating systems and web browsers. I've tested out the following two options: Version 1: ✓ Version 2: ✔ (source) However, these symbols seem to be working ...

htmlunicodeasciihtml-entities

Looking to modify and cache external links in a Rails application

v. Rails 2.3.8 How can outbound links in Rails be dynamically modified and cached using fragment caching? I'm eager to hear different approaches without any preconceived notions. Thanks! Note: I have purposely omitted my own thoughts and code to kee ...

htmlruby-on-railscachinghyperlinknokogiri

Dividing 2 events for 2 children within a parent element using HTML DOM

Trying to implement select and delete functions, but encountering an issue where clicking on select triggers the delete function and results in a NaN value. Any suggestions for fixing this problem? var collect = document.getElementById('col ...

javascripthtml

Padding has an impact on the widths of flexbox items

Take a look at this code snippet: http://jsfiddle.net/56qwuz6o/3/ <div style="display:flex"> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div> </div> div div { ...

cssflexbox

Tips for seamlessly transferring a generated SAS token from a NodeJS Azure Function to an HTML file

I have recently developed a custom API using an Azure Function built with NodeJS. This API incorporates an HTML interface that allows users to upload and download files from Azure Storage containers using SAS tokens. However, I now need to enhance the func ...

htmlazureazure-functionsazure-blob-storage