Explaining the precise measurements of font size in CSS

I recently started diving into the world of CSS and picked up a copy of Eric Meyer's 3rd edition of CSS: The Definitive Guide.

While reading through his section on font sizes (page 107), I came across an interesting concept - that the font size determines the em box. For example, if I set:

span { font-size: 10px; }

Would this statement exactly set both the horizontal and vertical dimensions of the em box to 10px? According to Meyer, the measurement of the em box is the distance between baselines.

I can't help but wonder why it's called a "box" when it seems to only measure vertical height. Shouldn't it be referred to as just the em height instead?

cssfonts

Answer №1

"em" can be used as a relative unit of measurement for both horizontal and vertical dimensions.

For example, if the current font size is 12px, applying margin:1em to a child element will result in a 12px margin around it. If you later change the font size of the parent element to 16px, the margin will also adjust to 16px accordingly.

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

Using Jquery to load a css background image with a loader

I am seeking suggestions on how to display a loader between button clicks while waiting for a background image to fully load. Thank you <html > <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type= ...

javascriptjqueryhtmlcsspreloader

Curvature Factor equals Overflow of Color

After trying various solutions like "background-clip: padding-box;" to address the issue of background color bleeding outside of the border, I'm still not completely satisfied with the result. Is there a more effective fix for this problem? Check out ...

background-colorcss

Place a Three.js scene within a jQuery modal dialogue box

I am attempting to integrate a Three.js scene into a jQuery modal window. The objective is to utilize the Three.js scene in a larger window size. This scene should be displayed after clicking on an image that represents the scene in a smaller dimension. Y ...

javascriptjquerycsscanvasthree.js

Increasing the boundary width beyond a specified limit with CSS

Need help extending the border-top of an element beyond a container width set to 1024px, while maintaining center alignment on the page with left alignment. Thank you! Here is the code snippet: HTML <main> <div> <span>Hello& ...

htmlcss

The content inside the bootstrap modal is not visible

My goal is to trigger a modal window when a specific div is clicked using bootstrap modal. However, upon clicking the div, the screen darkens but the modal body fails to appear. Code: <html> <head> <title></title> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Troubleshooting Owl Carousel's width problems upon initial loading

Currently, I am utilizing the Owl Carousel and have the following script: $("#owl-demo").owlCarousel({ items : 3 }); My intention is for the container to display 3 images. However, upon initial load, this is what appears: Oddly enough, when I resize ...

jquerycsscarouselowl-carousel

The background video on the website is having trouble resizing properly to fit the screen dimensions

I'm new to coding and I'm attempting to incorporate a background video on the homepage. The issue arises when I resize my window or view it on a mobile device, as the video fails to adjust to the window size, causing side scrolling that reveals t ...

htmlcssbackgroundadjustment

The sub-menu options are constantly shifting... How can I keep them in place?

Here we go again... I'm having trouble with my sub-menu elements moving when I hover over them. I've searched for a solution but haven't found anything helpful. The previous advice I received about matching padding and adding transparent bo ...

htmlcss

What is causing Microsoft Edge to highlight this span and behave as though it's a hyperlink?

I am currently in the process of redesigning a website, and I've encountered an issue with the header markup. While the design looks fine on most browsers, it behaves strangely in Microsoft Edge on Windows 10. The phone number in the header is inexpli ...

htmlcssbootstrap-4

Create a radial-gradient() that covers two separate elements

Seeking to create a spherical appearance for a circle made of two semi-circular divs using background: radial-gradient(). Any ideas on achieving this effect without combining the two semi-circle divs into one circular div? [The decision to use two semi-ci ...

cssradial-gradients

The CSS styling for a pie chart does not seem to be functioning properly when using jQuery's

https://i.stack.imgur.com/kEAKC.png https://i.stack.imgur.com/03tHg.png After examining the two images above, it appears that the CSS is not functioning properly when I try to append the same HTML code using JavaScript. Below is the snippet of my HTML co ...

javascriptjqueryhtmlcssstyles

What is the best way to combine flex-direction and flex-wrap in one row?

I'm working with a React component that looks like this: <Card className='form-margin width card' zDepth='3'> <CardText> <strong>Test</strong><br /> This is some text </Card ...

cssreact-nativeflexboxreact-native-flexbox

Switch Button Hyperlink in HTML/CSS

I have the following code: document.addEventListener("DOMContentLoaded", function(event) { (function() { requestAnimationFrame(function() { var banner; banner = document.querySelector('.exponea-banner3'); banner.classList ...

javascripthtmljquerycssanimation

Display a specific paragraph inside a div using jQuery

I am having trouble getting my jQuery code to display a specific paragraph when a particular div is clicked on. My goal is for the content "v" to be displayed if the user clicks on the ".Virus" div, and for the contents of ".screenInfo" to be shown if the ...

javascriptjqueryhtmlcssfunction

Two CSS Issues - One specific to mobile devices, the other unique to Chrome browser

Having trouble with the top banner not stretching all the way on iPhone. Any solutions? Here's a screenshot for reference: Below is the CSS applied to the div: #banner { background-color: #F7F7F7; background-size: cover; box-shadow: 0 0 ...

iphonecssmobilehtml

Concealing a section of a table with JavaScript while preserving the original table structure

I made some adjustments to the script tag: $(document).ready(function) { Now, the evenTd's are hidden correctly. Here is the table with the code provided: <table> <tr> <td>itemOne</td> <td class="even ...

javascriptjqueryhtmlcssshow-hide

Altering the hue of various stroke patterns

I've encountered an issue where I want to create skill bars that display my skills in percentages. Luckily, I found a great code that allows me to do this. Although I would prefer to do it myself, I haven't come across a good tutorial that teache ...

javascripthtmlcss

Can someone explain why the color of a <select> element in Chrome is being influenced by the CSS property "font-family: inherit"? Here is an example

I've always been curious as to why the <select> element appears in different colors on various web pages. I've noticed that when the font-family:inherit css property affects the select element, it ends up looking blue! <!-- BLACK --> ...

htmlcsswebfrontend

What is the best way to arrange an unordered list in a horizontal layout?

I have four lists that I want to display side by side. The first row should show a Doctor and Patient side by side, the second row should show a Pharma Company and Employee side by side. However, in my code, this layout is not working as intended. .tree ...

htmlcss

Tips for avoiding the need to reload a single page application when selecting items in the navigation bar

I am in the process of creating a simple Single Page Application (SPA) which includes a carousel section, an about us section, some forms, and a team section. I have a straightforward question: How can I prevent the page from reloading when clicking on nav ...

javascriptjqueryhtmlcsstwitter-bootstrap