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.
I originally thought that the pre(html tag) would act just like 'white-space:pre'. However, it turns out that it does not behave in the same way. <pre> aaa bbb </pre> <p style="white-space:pre;"> aaa bbb </p> The <pr ...
We've recently come across an issue where the text-decoration of an underline in an anchor tag appears strange when there is a sup element present. The visual glitch looks like this: For reference, here's the HTML structure we are working with: ...
My goal is to switch the image source upon mouseover using a combination of asp.net and javascript. Here is the code I am currently using: <asp:ImageButton id="button" runat="server" Height="65px" ImageUrl="~/images/logo.png" OnMouseOver="src='~ ...
I am a beginner in PHP and CSS. After extensive reading and learning little by little, I successfully implemented notifications in my project using PHP and CSS. It functions properly, displaying the counts (friends, messages, and notifications) and redire ...
What is the best way to retrieve data from a MySQL database that corresponds to user input on a web page, and then showcase the content without having to reload the page using PHP or another suitable language? I would greatly appreciate any assistance wi ...
Hey there, I'm really in need of some assistance with this issue that's been driving me crazy... :) So, I'm working on a project using Symfony2 and AngularJS: <form class="navbar-form navbar-right" role="form" action="" method="post"> ...
I've been experimenting with a custom element for a paper-dialog popup that I want to incorporate. Surprisingly, when I create a test page within the same file where the custom element is defined, using all the identical imports as my main index, it w ...
I've been encountering an issue while trying to transition from a JSX page to an HTML page. Every time I attempt to do so, I receive a 404 error stating that the page doesn't exist. It's puzzling because it is clearly present in my files and ...
I am trying to convert an HTML table into a 2D array (rows and columns) using only the HTMLParser library in Python, without relying on BeautifulSoup or other non-standard libraries. This task is part of a personal project that I am working on for fun :) ...
Could someone assist me in aligning a logo on the left and navigation menu on the right using HTML and CSS? I envision it to look like the image displayed. I have tried various approaches to adjust my CSS styling, but nothing seems to be working as inten ...
Upon navigating to my website and accessing the webpage featuring an accordion, the accordion successfully appears and hides after 1500ms as intended. However, when attempting to reveal the text by clicking on the headings, nothing happens. The heading sim ...
Suppose I am tracking the number of mouse clicks in Flash. To do this, I have utilized the following code: import flash.events.MouseEvent; plus.addEventListener(MouseEvent.CLICK,aaa) var i:int=0; function aaa(e:MouseEvent) { i++; var a:Number ...
When attempting to load a specific webpage using an iframe, I encountered the following issue: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></ ...
Is there a way to ensure that items placed in a container do not exceed the boundaries of the container? I am trying to use my logo as the home button, but when I set the image height and width to 100%, it becomes larger than the nav bar. The CSS for the n ...
I have a DateForm class defined in my form.py file: class DateForm(forms.Form): date = forms.DateTimeField( input_formats=['%m/%d/%Y %H:%M'], widget=forms.DateTimeInput(attrs={ 'class': 'form-control dateti ...
I need help achieving a background photo with a div in front, featuring a blurry dark background with white text. Currently, the setup shows a dark background without blur and dark text. Can someone please assist me? #section0 { background-color: light ...
I am seeking to customize the color of the switch component based on its checked and unchecked state. By default, it displays in red. My goal is to have the "ball knob" appear yellow when the switch is checked and grey when it is not. This styling must be ...
Just a heads up, I'm not really experienced in development. More on the newbie side of things, but eager to learn. I've been looking for an answer to my question, but so far haven't come across anything that fits my specific situation. It m ...
Is there a way to position a triangle in the bottom right corner of a parent div without it extending beyond the boundaries? I attempted to use tailwind css for this, but the sides of the triangle are crossing over the parent div. Any suggestions on how to ...
Could someone help clarify the distinction between these two types of CSS declarations: ul#test { } #test ul { } Despite my searching, I am unable to pinpoint the difference, but they exhibit different behaviors when implemented on a test page. To me, i ...