What causes a nested span within a div to not adhere to the line-height rule of the div?

I'm encountering an issue where a div with a font size and line height set to 88 is containing text that extends beyond the specified height. Why is this happening?

<div style="font-size:88px;line-height:88px;">I need <span sytle="color:red;">videos</span></div>

Upon inspecting the element, I noticed that while the parent div appears to be 88px tall, highlighting the text "I need" and its nested span shows a total height of 101px. This inconsistency persists even when setting the line-height on the span itself:

<div style="font-size:88px;line-height:88px;">
      I need <span style="font-size:88px;line-height:88px;color:red;">videos</span>
    </div>

To see the issue in action, check out this repl: https://repl.it/@teeej/ReliablePunctualRam

htmlcss

Answer №1

<span> is typically considered an inline element in HTML.

If you want it to act more like an inline block element, you can set its display property to "inline-block", which will make it have a specific height of 88px:

div > span { 
  display: inline-block; 
  background-color: rgba(255,0,0,.1);
}
<div style="font-size:88px;line-height:88px;">
      I need <span style="font-size:88px;line-height:88px;">videos</span>
</div>

If you want to learn more about the display property and its effects, check out the Candidate Recommendation by the CSS Working Group here. You can also refer to the official Recommendation on the W3C website here.

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

What's the best way to eliminate blank space in my Bootstrap grid columns?

I'm facing an issue with the search filter layout on my website. It includes input fields for a search term, two datepickers, and two buttons: <div id="search-holder"> <div id="search-box"> <div ...

htmlcsstwitter-bootstrapbootstrap-4

Can 'fr' units be used in the `calc()` function of CSS?

In this particular scenario, the query arises whether the CSS calc() function extends its support to the fr unit as presented in the below example? .sample-grid { --main-fr: 60fr; grid-template-columns: var(--main-fr) 1rem calc(100 - var(--main-fr ...

htmlcsscss-grid

What is preventing me from loading a JavaScript script using a regular working URL?

After inserting the following line into my HTML file: <script type="text/javascript" src="http://static.citygridmedia.com/ads/scripts/v2/loader.js"></script> (whether inside or outside the <head></head> tags), I am encountering a ...

javascripthtml

Inconsistency in retrieving and setting width values with jQuery across various web browsers

My TH element currently has both left and right padding set to 18px. I am attempting to determine its width using jQuery, convert this width from pixels to a percentage, and then set the element's width based on this calculated percentage. var origin ...

jquerycss

Move the focus to the previous input field by removing the key

I have created a phone number input with 10 fields that automatically skip to the next field when you fill in each number. However, I would like to be able to go back to the previous field if I make a mistake and need to delete a digit. How can I achieve ...

javascriptjqueryhtmlcssinput

Align a nested DIV in the center of the page both vertically and horizontally

Similar Question: Best way to center a <div> on a page vertically and horizontally? On my website landing page, the Container DIV occupies 100% of the Height and Width. While I have successfully centered the InnerContainer horizontally, I am fac ...

htmlcss

The Owl carousel animation fails to work in Chrome browser

I am currently customizing an HTML5 template that utilizes the Owl Carousel 1.3.2. My goal is to incorporate a smooth fade animation when transitioning between slider images. The code snippet below works perfectly in the Mozilla Browser, however, I'm ...

javascriptjquerycsshtmlowl-carousel

What could be causing the divs to overlap? Without the use of floats or absolute positioning,

When resizing vertically on mobile, my date-time-container is overlapping the upper elements welcome and weather. Despite setting them as block level elements, adding clear: both, and not using absolute positioning or floats, the overlap issue persists. An ...

javascripthtmlcsspositioncss-position

Exploring the semantic-ui dropdown menu feature in Chrome

When I first started learning to code with semantic-ui framework, I noticed a difference in behavior in Chrome compared to other browsers. The pointing menu on the left element (such as the search box) breaks down in Chrome, whereas it displays correctly i ...

htmlcssgoogle-chromemenusemantic-ui

The width of an HTML input and button elements do not match

Currently, I am facing an unusual issue where my input and button tags seem to have the same width assigned to them (width: 341.5px; calculated from $(window).width() / 4) in the code, but visually they appear to be of different widths. Here is a visual re ...

javascriptjqueryhtmlcss

Utilizing Bootstrap to create a responsive design with a full-height view on the body,

While adjusting the page width in Chrome dev tools, I noticed that the page also increases vertically. It appears that Bootstrap is assuming a viewport height larger than what it actually is. Here is the relevant code snippet: <!DOCTYPE html> <ht ...

htmlcssflexboxbootstrap-5dynamic-resizing

Decrease the dimensions of the image while maintaining its width at 100%

I've got a dilemma with the images on my website that are linked from image hosting sites. They all need to be displayed at 100% width, but some of them have huge pixel dimensions which cause slow loading times. Is there a way to resize the images wi ...

javascripthtmlcssimage

Is it possible to align a CSS table row with its corresponding table header even when the table row is deeply nested within the table structure?

I am looking to keep the structure of my HTML code consistent and unaltered. However, this has resulted in a form tag being nested inside a table row before the table cells can begin. The information I need to display is tabulated data, which makes CSS t ...

htmlcss

Verify if an item is currently within the user's view

I'm encountering a new issue with a menu I'm working on. My goal is to hide the menu when the user clicks outside of it. The challenge lies in the fact that the menu is always visible but translated to the right of the element, making it not dire ...

javascriptjqueryhtmlcss

Showcasing a variety of product titles with the help of CSS

Since the HTML is hosted on another server and I have no control over it, how can I use CSS to style certain list items? For example, The HTML on the server side: <ol> <li>Coffee</li> <li>Milk</li> <li>Orange Juice< ...

htmlcsslist

jQuery enables the creation of fresh form fields

Currently, I am working on a form that initially consists of 2 text input fields. The typical use case involves the user entering a number in one field and their name in the other. Following this, the page updates itself without reloading. However, there a ...

javascriptjqueryhtmlformsdynamic

Using jQuery to create sliding animations with left and right transitions

I recently learned about the slideUp and slideDown functions in jQuery. Are there any similar functions or methods for sliding elements to the left or right? ...

javascriptjqueryhtmlcss

Adjust text size using the "increase toggle"

I'm having trouble adjusting the font size of my text within the <div class="comment more>. Whenever I try to wrap the text in a <p>, the "more toggle" functionality stops working properly. Instead of revealing more text when I click on "m ...

javascripthtmlcss

What is the best way to format a string to display the second value in the string?

I have successfully combined the currency and value columns into one column displaying USD 20000. Now I am looking to format the value string to appear as USD 20,000. However, I am unsure of how to incorporate property.DisplayFormatString into the second s ...

c#htmlasp.netdevexpress

Managing post and session data during PHP form submission

I've encountered an issue with my code structure. What I aim to achieve is: To validate if post values exist, then execute the query and show the results. If post values are not present, check for a session value. If session is available, manipulate ...

phphtmlformsif-statementisset