Could someone provide an example of how "em is relative to the font size and % is relative to the parent element" works?
What exactly do "relative to the font size" and "relative to the parent element" mean?
Could someone provide an example of how "em is relative to the font size and % is relative to the parent element" works?
What exactly do "relative to the font size" and "relative to the parent element" mean?
Imagine you are setting the width of a container within another container. By setting the width to 50%, it will be half the width of the containing box. However, if you set the width in pixels instead, it will be based on the actual size of a pixel and not affected by anything else but your text.
Consider this illustration:
<div id='container' style='height: 400px'>
<div style='height: 1.5em'>Test 1</div>
<div style='height: 50%'>Test 2</div>
</div>
In Test 1, the box's height is 150% of the text size. For example, with a font size of 10px, the height would be 15px. In the second scenario, the height is 50% of the parent element's height; therefore, Test 2 is 200px since #container is 400px.
If I recall correctly, applying a percentage to font-size is equivalent to using em units. For instance, font-size: 150% is the same as font-size: 1.5em (if my memory serves me right).
I personally prefer utilizing em for specifying height or width. When used for setting width, it ensures that the text wrapping remains consistent when changing the font size (e.g. for users who adjust their font size). This approach proves beneficial especially in text-heavy pages where small fonts may lead to excessively wide layout. (Refer to this article on Em Widths)
<div style='width: 80em`>Lorem ipsum...</div>
em represents a typographic measurement, essentially a percentage of the font size, while %, as mentioned, is relative to the parent element.
Consider this scenario:
body {font-size: 12px;}
p.rel-to-font { font-size: 1.5em;}
<body>
<p class="rel-to-font"> Some cool text</p>
</body>
In this case, the p.rel-to-font will have an effective font-size of 18px, which is 150% of 12px.
body,p {font-size: 12px;}
div {font-size: 15px;}
p.rel-to-parent { font-size: 150%;}
p.rel-to-font { font-size: 1.5em;}
<body>
<div>
<p id="test-1"class="rel-to-parent"> Some cool text</p>
<p id="test-2" class="rel-to-font"> Some cool text</p>
</div>
<p id="test-3" class="rel-to-font"> Some cool text</p>
<p id="test-4" class="rel-to-parent"> Some cool text</p>
</body>
For instance, in this demonstration, #test-1 will have a computed font-size of 22.5px, #test-2 will be 18px, #test-3 and #test-4 will both be 18px.
I hope that explanation sheds some light on the topic. Many practical implementations find that % and em often translate to a similar outcome, although there are exceptions to this rule.
Can the text in an H1 tag have each word appear in a different random color, and then refresh to show new random colors? I have 5 specific colors in mind that I'd like to use. How would I go about coding this? ...
I'm currently facing a challenge in getting text to wrap around an irregular shape on a web page. Despite numerous attempts, I have yet to find a solution that meets my requirements. Attached is an image illustrating the layout I am aiming for. The ...
Want to learn how to create a background like this using CSS? Check out this link for inspiration! ...
Every time my build server completes a new build, it automatically uploads a pass/fail graphic to the gh-pages branch. I'm looking to showcase this graphic on my project's page. Unfortunately, it appears that gh-pages is caching the image. Any s ...
Important Notes: I have exhaustively explored all the questions and answers related to this particular topic. The question I have is very straightforward: How many pixels are equivalent to 1 character? Here's a sample of my code - code Related Sear ...
When using a Bootstrap Form Input to allow the user to enter text, I am wondering how to save that text and use it as a parameter in a function. Below is the HTML snippet I have: <!--Directory Input Form--> <div class="row"> <div class= ...
An error occurs when attempting to run the code. wait - compiling... error - ../../../../../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js:1:0 Module not found: Can't resolve '@mui/material/utils' null Note: @mui/material pack ...
Essentially, I have a div that spans the entire width of its container, inside it is an image link. The image's width is set to adjust automatically with a fixed height of 600px. The link covers the whole width of the div, which in this case is the wi ...
Is there a way to automatically run scripts on specific elements after their creation? For example, using a jQuery plugin like autoresize to expand the height of a textarea. If I use $('.textarea').autosize(), only the current textareas will be a ...
Can the CSS (Level 4) @document rule handle URLs that have the # symbol or include query parameters? For those who are not familiar with this topic Currently, only Firefox supports this feature with the @-moz-document prefix. If other browsers start supp ...
At index [1], both elements are identified, but at index [2], nothing is identified. The key difference between the two is that one has display:none, and the other has display:block. However, their involvement in determining these fields is minimal due to ...
Despite my best efforts, I am unable to retrieve the data from the server using the snapshot docs. I have verified that the collection is named "creaciones" in lowercase. There is one document in the collection with existing data. I have double-checked fo ...
I am currently utilizing VueJS and Vuetify in my project. I have successfully implemented Vuetify's FAB component, which displays a list of fab buttons as demonstrated in the documentation: <div id="fab-button"> <v-speed-dial v-mo ...
Currently, I am experimenting with the Aria template, a free Bootstrap-based template. My goal is to utilize the gallery feature without any accompanying text. However, even after removing the text from the lightbox, the white background persists. What I s ...
In my extensive form, several fields within the setup encounter the same issue. Specifically, a checkbox below 'contact telephone number' causes the surrounding content to become misaligned. https://i.sstatic.net/8qI8Z.png My attempts to resolv ...
In my Angular project, I utilized Matmenu and MatDialogModule. I needed to change the position of mat-menu, so I achieved this by adding the following snippet to my .scss file. ::ng-deep .cdk-overlay-pane { transform: translate(78%, 10%); } However, ...
I have 3 sets of buttons, with each set containing 9 buttons stacked in 3 columns inside an ordered list (ol) within list items (li). I have removed the bottom border of the buttons to avoid double borders since they are stacked on top of each other withou ...
I can't seem to get this code to work properly. I have saved it as an .html file on my computer, but it's not displaying anything when I try to open it in Google Chrome. <DOCTYPE! html> <html> <head> <script src= ...
Upon receiving a JSON Object in HTML, I am passing it to a JavaScript function defined below. The issue arises when the same folderName appears repeatedly on the HTML page. JSON Object: { "folderName": "arjunram-test", "objects": [ { ...
I am currently in the process of customizing the FlexNav Plugin. I have made a modification to allow sub-menus to open on click instead of hover. However, a new issue has arisen where it requires two clicks to open a submenu. Upon investigation, I have i ...