Should I use em or % for margins and paddings? For example:
.box{
display: inline-block;
width: 20%;
background: #bada55;
margin-right: 5%;
}
https://jsfiddle.net/8t4a9shn/
There is no real answer to that as em and % or completely different units:
em is relative to the font size of the parent element
% is relative to the viewport width or height
So it always depends on your use case.
Use in em or px,
because these value is static,
means not change with screen Resolution and Size.
but % is changeable according to screen Resolution and Size.
If you have any other doubt please explain properly.
Related
In website source, I have sometimes seen developers use the rem unit. Is it similar to em? I tried it to see what it actually does, but what is it relative to?
Demo
HTML
<div>Hello <p>World</p></div>
CSS
div {
font-size: 1.4rem;
}
div p {
font-size: 1.4rem;
}
EMs are relative to their parent's font size
REMs are relative to a base font-size
This is important when intermediate containers change font sizes. Child elements with EMs will be affected, those using REMs will not.
The unit rem (root em) stands for the font size of the root element. In an HTML document, the root element is the html element.
While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.
em gives the ability to control an area of a design. As in, scale the type in that specific area relatively.
rem gives the ability to scale type across the entire page easily.
Basically em is relative to the nearest parent in CSS, while is rem is relative to the parent of the page which is usually the html tag...
You see the difference clearly if you run the css below and how the parent is effecting it:
html {
font-size: 16px;
}
.lg-font {
font-size: 30px;
}
p.rem {
font-size: 1rem;
}
p.em {
font-size: 1em;
}
<div class="lg-font">
<p class="em">Hello World - em</p>
</div>
<div class="lg-font">
<p class="rem">Hello World - rem</p>
</div>
Summary:
rem : a CSS unit which is relative to the font size of the html element.
em : a CSS unit which is relative to the font size of the parent element.
Example:
.element {
width: 10rem;
height: 10rem;
background-color: green;
font-size: 5px;
}
.innerElement {
width: 10em;
height: 10em;
background-color: blue;
}
<div class="element">
<div class="innerElement"></div>
</div>
In the above example the green square is 160px by 160 px (unless you don't have browser default at 16px). This is because the browser default of the html element font-size is 16px and 10rem * 16px = 160.
The inside square is 10em big. Because its parent element is 5px the square is 5em * 10px = 50px.
How is this usefull:
By setting all units to rem have the following advantages:
We can scale our whole application with one CSS media query, in this media query we can specify the font size. By altering the font size all the elements which have the unit rem will scale accordingly.
When users are not using the default browser font-size of 16px our application will scale with the selected font size of the user.
Here is an example. divs sized with rem change as we change the font-size of the html element. Whereas those sized with em only change as we change the font-size of the div.
$(function() {
var htmlSize = $('input#html');
htmlSize.change(function() {
$('html').css('font-size', htmlSize.val() + 'px');
});
var divSize = $('input#div');
divSize.change(function() {
$('div').css('font-size', divSize.val() + 'px');
});
});
* {
float: left;
font-size: 20px;
margin:2px;
}
label {
clear:both;
}
div {
border: thin solid black;
}
div.rem1 {
width:4rem;
height: 4rem;
clear: both;
}
div.rem2 {
width: 3rem;
height: 3rem;
}
div.em1 {
width: 4em;
height: 4em;
clear: both;
}
div.em2 {
width: 3em;
height: 3em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Change html font-size
<input id="html" type='number' value="20" min="18" max="30" />
</label>
<div class="rem rem1">rem</div>
<div class="rem rem2">rem</div>
<label>Change div font-size
<input id="div" type='number' value="20" min="18" max="30" />
</label>
<div class="em em1">em</div>
<div class="em em2">em</div>
In em relative unit the font size is measured on the base of nearest parent font size but if the font size is not defined for any of parent elements then by default font size will be defined according to the root html element
The rem relative unit is calculated only by root html element, thus, the font size of the parent element does not affect it
Just some example CSS to show how rem will work, notice the root font-size is set using px via html tag
html, body { font-size: 16px; }
div { font-size: 18px; }
p { font-size: 1rem; }
And the corresponding HTML:
<div>
<p>Lorem Ipsum</p>
</div>
Because the <p> tag is set to 1rem it ignores the parent div’s font-size of 18px. However, if we instead set the font-size to 1em, the paragraph would inherit the 18px font-size of its parent element. I know this example isn’t particularly useful, but hopefully it can help illustrate the difference between em and rem.
em and rem are font-based relative units and it's different to use ems for fonts or for length, so both ems and rems are font-based but the difference between them is that ems use the parent or the current element as a reference while rems use the root font size as the reference.
If we want to use ems for font-sizes then the reference is simply the parents computed font-size similar to what happens with percentages.
In the bellow example, a three em font-size on the header child element results in 72 pixels simply because that's three times parent font size which is (150/100)*16=24px. Now for length, it's just a bit different. The 2em padding on the header, since it's a length measurement, uses the font size of the current element as a reference and we already know that's 24 pixels, so 2em will result in 48-pixel padding, got it? It's a subtle difference, but an important one. When you use em if it's for fonts the reference is the parent and for length, the reference is the current element.
html,body{
font-size:16px;
width:80vw;
}
header{
font-size:150%;
padding 2em;
margin-bottom:10rem;
height:90vh;
widht 1000px;
}
header-child{
font-size:3em;
padding:10%;
}
About the rem, it actually works the same way for both font sizes and lengths because it always just uses the root font size as a reference. This means that the 10 rem padding that we have here will result in 160 pixels because the root font size is 16.
CSS measuring units: em, rem both relative to their parents front size. The size will change depending on its Parents font size.
Example:
rem : 100% of the Root Element font size.
em : 100% of the Parent font size.
EM is relative to the font-size of its direct or nearest parent, and REM is only relative to the html (root) font-size.
The main problem comes in using the 'em' and 'rem' when there is a parent font size....
**Here is the example:
suppose I want the font size of 2em for body of my website so we include 2em font size in body which is known as parent font size ...
and again for my H1 i want a size of 5.6 something and after we hit save and head back to our website and refresh then we will notice that our H1 has now become more than 5.6 .
this happens because the fonts gets inherited and added on top of whatever it got from its parent....(this problems are going to be happened when we are using em and percentages)
so, to get out of this type of problems the programmers use rem.
In website source, I have sometimes seen developers use the rem unit. Is it similar to em? I tried it to see what it actually does, but what is it relative to?
Demo
HTML
<div>Hello <p>World</p></div>
CSS
div {
font-size: 1.4rem;
}
div p {
font-size: 1.4rem;
}
EMs are relative to their parent's font size
REMs are relative to a base font-size
This is important when intermediate containers change font sizes. Child elements with EMs will be affected, those using REMs will not.
The unit rem (root em) stands for the font size of the root element. In an HTML document, the root element is the html element.
While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.
em gives the ability to control an area of a design. As in, scale the type in that specific area relatively.
rem gives the ability to scale type across the entire page easily.
Basically em is relative to the nearest parent in CSS, while is rem is relative to the parent of the page which is usually the html tag...
You see the difference clearly if you run the css below and how the parent is effecting it:
html {
font-size: 16px;
}
.lg-font {
font-size: 30px;
}
p.rem {
font-size: 1rem;
}
p.em {
font-size: 1em;
}
<div class="lg-font">
<p class="em">Hello World - em</p>
</div>
<div class="lg-font">
<p class="rem">Hello World - rem</p>
</div>
Summary:
rem : a CSS unit which is relative to the font size of the html element.
em : a CSS unit which is relative to the font size of the parent element.
Example:
.element {
width: 10rem;
height: 10rem;
background-color: green;
font-size: 5px;
}
.innerElement {
width: 10em;
height: 10em;
background-color: blue;
}
<div class="element">
<div class="innerElement"></div>
</div>
In the above example the green square is 160px by 160 px (unless you don't have browser default at 16px). This is because the browser default of the html element font-size is 16px and 10rem * 16px = 160.
The inside square is 10em big. Because its parent element is 5px the square is 5em * 10px = 50px.
How is this usefull:
By setting all units to rem have the following advantages:
We can scale our whole application with one CSS media query, in this media query we can specify the font size. By altering the font size all the elements which have the unit rem will scale accordingly.
When users are not using the default browser font-size of 16px our application will scale with the selected font size of the user.
Here is an example. divs sized with rem change as we change the font-size of the html element. Whereas those sized with em only change as we change the font-size of the div.
$(function() {
var htmlSize = $('input#html');
htmlSize.change(function() {
$('html').css('font-size', htmlSize.val() + 'px');
});
var divSize = $('input#div');
divSize.change(function() {
$('div').css('font-size', divSize.val() + 'px');
});
});
* {
float: left;
font-size: 20px;
margin:2px;
}
label {
clear:both;
}
div {
border: thin solid black;
}
div.rem1 {
width:4rem;
height: 4rem;
clear: both;
}
div.rem2 {
width: 3rem;
height: 3rem;
}
div.em1 {
width: 4em;
height: 4em;
clear: both;
}
div.em2 {
width: 3em;
height: 3em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Change html font-size
<input id="html" type='number' value="20" min="18" max="30" />
</label>
<div class="rem rem1">rem</div>
<div class="rem rem2">rem</div>
<label>Change div font-size
<input id="div" type='number' value="20" min="18" max="30" />
</label>
<div class="em em1">em</div>
<div class="em em2">em</div>
In em relative unit the font size is measured on the base of nearest parent font size but if the font size is not defined for any of parent elements then by default font size will be defined according to the root html element
The rem relative unit is calculated only by root html element, thus, the font size of the parent element does not affect it
Just some example CSS to show how rem will work, notice the root font-size is set using px via html tag
html, body { font-size: 16px; }
div { font-size: 18px; }
p { font-size: 1rem; }
And the corresponding HTML:
<div>
<p>Lorem Ipsum</p>
</div>
Because the <p> tag is set to 1rem it ignores the parent div’s font-size of 18px. However, if we instead set the font-size to 1em, the paragraph would inherit the 18px font-size of its parent element. I know this example isn’t particularly useful, but hopefully it can help illustrate the difference between em and rem.
em and rem are font-based relative units and it's different to use ems for fonts or for length, so both ems and rems are font-based but the difference between them is that ems use the parent or the current element as a reference while rems use the root font size as the reference.
If we want to use ems for font-sizes then the reference is simply the parents computed font-size similar to what happens with percentages.
In the bellow example, a three em font-size on the header child element results in 72 pixels simply because that's three times parent font size which is (150/100)*16=24px. Now for length, it's just a bit different. The 2em padding on the header, since it's a length measurement, uses the font size of the current element as a reference and we already know that's 24 pixels, so 2em will result in 48-pixel padding, got it? It's a subtle difference, but an important one. When you use em if it's for fonts the reference is the parent and for length, the reference is the current element.
html,body{
font-size:16px;
width:80vw;
}
header{
font-size:150%;
padding 2em;
margin-bottom:10rem;
height:90vh;
widht 1000px;
}
header-child{
font-size:3em;
padding:10%;
}
About the rem, it actually works the same way for both font sizes and lengths because it always just uses the root font size as a reference. This means that the 10 rem padding that we have here will result in 160 pixels because the root font size is 16.
CSS measuring units: em, rem both relative to their parents front size. The size will change depending on its Parents font size.
Example:
rem : 100% of the Root Element font size.
em : 100% of the Parent font size.
EM is relative to the font-size of its direct or nearest parent, and REM is only relative to the html (root) font-size.
The main problem comes in using the 'em' and 'rem' when there is a parent font size....
**Here is the example:
suppose I want the font size of 2em for body of my website so we include 2em font size in body which is known as parent font size ...
and again for my H1 i want a size of 5.6 something and after we hit save and head back to our website and refresh then we will notice that our H1 has now become more than 5.6 .
this happens because the fonts gets inherited and added on top of whatever it got from its parent....(this problems are going to be happened when we are using em and percentages)
so, to get out of this type of problems the programmers use rem.
Definition says 1vw = 1% of viewport width. But I don't get it what does it mean when used with font-size? For instance what does it mean if I set:
h1 {
font-size: 10vw;
}
I thought that if I have h1 with 10 characters it would take 100% of viewport, but it does not.
Font-size refers to the vertical size of the font not character width
See the demo below for how they react differently.
h1 {
font-size: 10vw;
}
h1:nth-of-type(2) {
font-size: 10vh;
}
<h1>MY HEADER</h1>
<h1>MY HEADER</h1>
JSfiddle Demo
As Paulie_D stated:
Font-size refers to the vertical size of the font not character width.
If you're looking for the width of the character, you might want to look at font-weight (for the thickness of a character) or font-kerning (for the spacing between characters).
the vw unit is based on the width of the viewport.
1vw is 1% of the browser viewport width. (vh is the corresponding value for height)
This means if the viewport is 600px wide then 10vw is 60px and that's how high your font will be
It also means that dimensions, including heights, can be set relative to the width of the screen, which is very useful for maintaining aspect ratios. This means your font size will respond to the size of the viewport, something which you can't do with a font any other way
It's not supported in all cases, so it's good to provide a pixel fallback, like this:
height: 100px; /* over-ridden if vw can be interpreted */
height: 10vw; /* ignored if not understood */
I want a single form of my website to follow a simple rule: the page must appear identical at every resolution you watch.
So I need h1 be height, e.g., 10% of page, h2 be 7%, etc..
Is there a way to realize this with CSS?
Well, as a pure CSS solution you could use vh Viewport-percentage lengths for elements to specify their font-size/line-height base on the viewport height:
EXAMPLE HERE
h1 { font-size: 10vh; line-height: 10vh; }
h2 { font-size: 7vh; line-height: 7vh; }
5.1.2 Viewport-percentage lengths: the vw, vh, vmin, vmax units
The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly. However,
when the value of overflow on the root element is auto, any scroll
bars are assumed not to exist. Note that the initial containing
block’s size is affected by the presence of scrollbars on the
viewport.
vh unit
Equal to 1% of the height of the initial containing block.
It's worth noting that vh unit is supported in the modern web browsers (including IE9+).
How one could create a CSS rule for width which
Uses 100% width by default
If 100% width exceeds certain pixel width (let's say 512 px), then the width is clamped down to this pixel width
I am not sure about width and max-width relations, or how calc() is supported or could express this. This would need to work with the latest WebKit browsers and Firefox 4. IE8 etc. support not needed
That's in fact the intended use of max-width. If the computed (actual) width of an element exceeds max-width, it will be constrained to the max value instead of going beyond it. Percentage versus pixels isn't relevant.
Declare both in the same rule like this (no need for the calc() function):
#somediv {
width: 100%;
max-width: 512px;
}
If it's block level element it should be 100% by default so no need to declare the width, then max-width: 512px; would curtail it
calc() is not supported very well at all, but in this case I wouldn't think you would need it
div{ max-width: 512px; }
should suffice.