What is the resulting height when both a <p> and <span> tag are styled with em font sizes?

When working on designing in the browser with CSS, it is important to note that the font-size set on a <span> tag is relative and based on the <p> tag.

Exploration

After conducting some research, I came across a recent question related to nested <span> inside a <p> tag that discusses font size differences. This can be found at "Nested <span> inside a <p> tag giving different font size" referencing insights from CSS-Tricks:

"The em unit is a relative unit based on the computed value of the font size of the parent element. Child elements rely on their parent to determine their font size."

Despite my best efforts, I could not find a conclusive answer to my query through searches:

  • [css] total em size
  • [css] em size
  • CSS: 100% font size - 100% of what?

Another related question did not provide the answers I was seeking:

  • Why would the height increase with a smaller font size?

Main Inquiry

If we consider the following HTML:

<p class="foo"><span class="bar">This month is March.</span></p>

And corresponding CSS:

.foo {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.833em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}
.bar {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.8em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}

What would be the actual height of the text "This month is March." considering the applied CSS font sizes within the <p> and <span> tags?

I am interested in understanding if there is a formula or method to calculate the final font size when both the <p> and <span> tags have specific heights assigned.

htmlcssfont-size

Answer №1

When dealing with the percentage value of em, the final result can be calculated by multiplying the individual font sizes together.

0.833em * 0.8em = 0.6664em

Whether this calculation will yield accurate results in the browser depends on how the browser manages font sizes internally. If the browser uses intermediate size representations in px for elements where em is applied, there may be slight variations due to rounding errors.

.foo {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.833em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}
.bar {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.8em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}

.bar2 {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.6664em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}
<p class="foo"><span class="bar">This month is March.</span></p>
<span class="bar2">This month is March.</span>

Answer №2

An em represents a proportion tied to the parent element. This means that any text utilizing an em value will be a percentage of the parent's text size.

In this scenario, the font-size of the <p> will amount to 83.3% of its parent. The font size of the <span> will then be 80% of that, translating to 66.64%.

If no parent font-size is specified, the browser defaults to 16px set on the html element. Consequently, your pixel value will calculate to:

16 * 0.833 * 0.8 = 10.6624

This computed value will round off to 11px.

Ideally, it is advisable to manually assign a font-size on the <body> tag for certainty. One key advantage of this behavior is the ease with which fluid layouts can be designed. All you have to do is adjust the font-size on the body based on varying screen sizes.

Answer №3

What is the precise height of the text "This month is March" in terms of font size?

The span's font size is given as 0.8em, meaning it is calculated as 0.8 * X where X represents the paragraph's font size.

Similarly, the paragraph has a font size of 0.8em, so its value is determined by 0.8 * Y where Y corresponds to the font size of the parent element. However, the parent element's font size is not provided in the question.

Hence, the font size of the span can be expressed as 0.8 * 0.8 * Y or 0.64 * Y

Answer №4

To achieve this, utilize the macro average ROC in comparison to micro average ROC.

<span style="font-size: 150%;color:#0000ff">macro average ROC</span> 
<span style="font-size: 250%"> > </span> <span style="font-size: 150%;background:#ff00ff">micro average ROC</span>

https://i.sstatic.net/XW67j.png

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

Troubleshooting problems with the CSS code for a progress bar in Gmail

I recently came across a unique progress bar design on Gmail and wanted to implement something similar. I found some code snippets on this webpage: . However, I encountered an issue where the progress bar was only displaying in Internet Explorer but not in ...

javascripthtmlcss

Tips for adjusting image dimensions with url() method in css

I have successfully incorporated collapsible functionality on my page. I would like to display a down arrow image instead of the default '+' symbol on the right side of the collapsible section. To achieve this, I can use the following CSS code s ...

javascripthtmlcss

What steps can be taken to retrieve a user's login information when their provided ID and Password match the records within the database?

When a user enters their ID and password in this form, the system checks whether it matches the data in the database. If there is a match, the user is allowed to log in and redirected to the "action.php" page. If there is no match, an error message is di ...

javascriptphphtmllogin-scriptlogin-control

Adding descriptive text before a website link is a helpful way to provide context for the reader. For example

My goal is not just to have JavaScript change the URL after my page has loaded. I want to be able to enter something like 'blog.mywebsite.com' into the omnibar and have it locate my website similar to how Steam does with 'store.steampowered. ...

javascriptphphtml.htaccessweb

Customizing the active link color in Bootstrap dropdown menus

Is there a way to customize the color and background of an active link in a boostrap's dropdown menu? Despite trying to override bootstrap's @dropdownLinkColorActive and @dropdownLinkBackgroundActive variables, the changes don't seem to tak ...

csstwitter-bootstrapdrop-down-menucolors

Conceal any zero values from an empty numerical input

Currently, I have a form that retrieves data from a database and includes a number input type field. When the field is empty, it defaults to displaying "0." However, I would like to hide the "0" and only show the value if it is different from 0. Despite a ...

javascripthtml

Show and conceal columns in HTML with the help of JavaScript

I need help with a webpage where I want to display a table with 2 columns and two rows (header and body). My goal is to use JavaScript to control the visibility of these 2 columns. The decision to show or hide the columns should be based on the values ...

javascripthtml

What is the best way to populate a dropdown menu in PHP?

I am trying to populate my combobox with names from an SQL database. I came across some code on W3schools, but I am having trouble integrating it into my own code. Currently, the combobox is filled with select, but that's not the intended functionalit ...

phphtmlajaxcombobox

Using jQuery to create an interactive form with PHP integration

I've set up a PHP form to post to a database successfully. However, after including it in a jQuery web page, the form is no longer posting to the database. Check out the code for both the webpage and the PHP file below. Interestingly, the form works f ...

phpjqueryhtml

Why isn't this code for hiding the animation and displaying it not functioning properly?

Why isn't this animation from display none to block working properly? The initial code appears as follows, and it functions correctly: $(".box_outer").stop().animate({top: '25px' , opacity: 1}, 100); When I add display: none; to the class ...

javascriptjquerycssanimation

Creating a dynamic 2D image using HTML5 animation

As a beginner HTML5 developer, I have been exploring ways to create an animated image using multiple jpg files stored in a specific folder on my website. My goal is to design an animation of a rabbit running across the page when a user clicks on a button. ...

javascriptjqueryhtmlcss

How to create collapsible and expandable HTML table columns using the <th> element?

I've searched far and wide for a solution to this conundrum and come up empty-handed. I have a HTML table with a total of 13 columns. The 7th column, labeled Number of Tops, is a sum of columns 8-11: # Short-sleeve, # Long-sleeve, # Sweaters, # Jacket ...

javascripthtmlcsshtml-tabledatatables

The overflow-x: scroll !important feature is not functioning properly on Samsung Internet when using translated SVGs

I'm experiencing an issue with a div container that is filled horizontally with SVG drawings generated dynamically. The width of the container exceeds the window's width, so I added overflow-x: scroll !important to enable scrolling. However, the ...

androidcsssvgoverflowsamsung-internet

Leveraging HTML attributes in CMS source code

My website is built using Prestashop, and the content pages are created using: Prestashop > Preferences > CMS > Source-Code. For each CMS page, I utilize basic HTML in the source code. THE ISSUE I am attempting to add a widget to the site&apos ...

htmlcontent-management-systemprestashopprestashop-1.6datakey

Issues with $.post function causing HTML to be displayed instead of the intended value

I have a question about sending the value of an HTML element to the server using POST. When I alert the result, I expect to only see the value but I am also getting the HTML content of the PHP file included in my code. Why is this happening? function post ...

phphtmlajaxpost

Removing an element in Vue.js

Can someone help me with a Vue.js issue I'm having? I'm working on a quiz and I want to add a button that deletes a question when clicked. Here's what I've tried so far: deleteQuestion(index) { this.questions.splice(index, ...

javascripthtmlvue.js

Ways to showcase tooltip text for an unordered list item?

When creating an unordered list, each element's text corresponds to a chapter name. I also want to include the description of each chapter as tooltip text. The Javascript code I currently have for generating a list item is: var list_item = document.c ...

javascripthtmlcss

Is there a way to dynamically update text using javascript on a daily basis?

I am currently developing a script to showcase different content and images every day. While I have successfully implemented the image loop to display a new picture daily, I need assistance in achieving the same functionality for the title. My aim is to c ...

javascriptjqueryhtmldynamic

What is the method to ensure span elements wrap text without setting a specific width or maximum width on the parent div?

Here is a snippet of code I have generated for displaying warnings or errors in Dojo dialogs: /* Relevant CSS styles */ .l-status-message-wrapper { height: auto; margin-left: 5px; margin-top: 2px; min-height: 15px; } .l-status-message-w ...

htmlcss

Updating and Preserving Content in Angular

I've encountered an issue while working on a code that allows users to edit and save a paragraph on the screen. Currently, the editing functionality is working fine and the save() operation is successful. However, after saving, the edited paragraph do ...

javascripthtmlangulartypescript