CSS Units - W3Schools

Trang chủ » Html Px Alternative » CSS Units - W3Schools

Có thể bạn quan tâm

CSS Units ❮ Previous Next ❯

CSS Units

CSS has several different units for expressing a length.

Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.

The length value is a number followed by a length unit, such as px, em, rem, etc.

CSS has two types of length units:

  • Absolute units
  • Relative units

CSS Absolute Units

Absolute units are fixed, and the length expressed in any of these will appear exactly that size.

Absolute units do not change when the screen size change, and are not recommended for websites. However, they can be used if the output medium is known, such as for print layout.

The most used absolute unit is px (pixels).

Unit Description
px pixels (1px = 1/96th of 1in) Try it
cm centimeters Try it
mm millimeters Try it
in inches (1in = 96px = 2.54cm) Try it
pt points (1pt = 1/72 of 1in) Try it
pc picas (1pc = 12 pt) Try it

Set Font Size With Px

Setting the text size with px (pixels) gives you full control over the text size.

If you use pixels, the web page may not scale very well on different screen sizes and the users cannot adjust the text size in their browser settings. However, users can still use the zoom tool to resize the entire page.

Example

Set font sizes with px:

h1 { font-size: 40px;}h2 { font-size: 30px;}p { font-size: 16px;}

Try it Yourself »

Note: A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.

CSS Relative Units

Relative units specify a length relative to another length (like parent element, root element, or viewport).

Relative length units scale better between different screen sizes.

Unit Description
em Relative to the font-size of the parent element Try it
ex Relative to the x-height of the current font (rarely used) Try it
ch Relative to width of the "0" (zero) Try it
fr A fractional unit. 1fr equals 1 part of the available space Try it
rem Relative to the font-size of the root HTML element Try it
vw Relative to 1% of the width of the viewport*. 100vw = full width of the viewport Try it
vh Relative to 1% of the height of the viewport*. 100vh = full height of the viewport Try it
vmin Relative to 1% of viewport's* smaller dimension Try it
vmax Relative to 1% of viewport's* larger dimension Try it
% Relative to the size of the parent element Try it

* Viewport = the browser window size. 1vw = 1% of the current width of the browser's viewport. So, if the viewport is 500px wide, 1vw is 5px.

Tip: The em and rem units are perfect for creating scalable and responsive websites!

Set Font Size With Em

The em unit is relative to the font size of the parent element. So, if the parent element has a font size of 16px, then 2.5em would result in 40px.

In the following example, the text size in em is the same as the previous example in pixels. However, the em unit allows the user to adjust the text size in the browser settings.

Example

Set font sizes with em:

body { font-size: 16px; /* Base font size */} h1 { font-size: 2.5em; /* 2.5 * 16 = 40px */} h2 { font-size: 1.875em; /* 1.875 * 16 = 30px */ } p { font-size: 1em; /* 1 * 16 = 16px */} Try it Yourself »

Set Font Size With Rem

The rem unit is relative to the font size of the root HTML element (<html>).

Unlike em, which is relative to the font-size of its parent element, rem always refers to the font-size of the <html> element, regardless of its position in the document tree. This makes rem very useful for creating scalable and responsive designs. By changing the font-size of the <html> element, all elements sized with rem units will scale proportionally throughout the entire page.

The default font-size of the <html> element in most browsers, is 16px. So, by default, 1rem equals 16px unless explicitly overridden in the CSS.

Example

Set font sizes with rem:

html { font-size: 16px; /* Set the root font size */} h1 { font-size: 2.5rem; /* 2.5 * 16 = 40px */} h2 { font-size: 1.875rem; /* 1.875 * 16 = 30px */ } p { font-size: 1rem; /* 1 * 16 = 16px */} Try it Yourself » ❮ Previous Next ❯ ★ +1 Sign in to track progress

Từ khóa » Html Px Alternative