CSS length Unit (EM) with EM tag

Source: Internet
Author: User
Tags relative

CSS supports a variety of length units. They can be divided into two broad categories: absolute length units (defined as lengths that do not depend on the absolute size of the display device), and relative lengths, which define the length relative to other units known to the browser.

Absolute length measurements can be used in five units: inches (in), cm (cm), mm (mm), points (point, writing PT), Word height (pica, writing pc). The pound and the word height are usually used as printing units, of which 1pica=12pt. CSS defines 1pica as 1/72in, that is to say, 72pica=1in. This is also the definition used in the Adobe PostScript language used by high quality printers.

CSS also supports the "absolute" length-pixels (pixels) in pixels as a point on the computer screen. However, because of pixel density and the user's choice of display resolution (the same display screen can support 640*480 resolution, but also support the resolution of 1024*768), the absolute size of the pixel will vary greatly from one monitor to another. In this way, the length represented in pixels is actually related to the monitor. The advantage of using pixels as a computer display unit is that the pixel is a strictly defined unit. However, pixel units can cause problems when you print a network document.

Absolute length units such as inches and centimeters are useful for printing, because they provide the absolute positioning required to lay out documents on a fixed sized paper. For this reason, absolute lengths are not suitable for use in electronic display documents because the display in the 6inches*4inches and 21inches diagonal displays will vary, There is no guarantee that the browser can display the document with a fixed window area (the user can choose the size of the window) on the given display. Considering such differences, it is appropriate to use units that can be automatically adjusted with the display area size or text font size. Fortunately, there are three CSS-length units that can achieve this behavior.

Relative length measurements can be in three different forms: EM units, ex units, and percentage (percentages). The EM and ex units define the length relative to the size of the font. The EM unit defines the length relative to the point value of the actual font: this way, if the font size is now 12pt, then 1.5em=18pt. Instead, the ex unit defines the length relative to the height of the font's x: That is, the height of the letter "X" in the current font. In this way, the ex size of a unit depends on both the size of the font and the font family type, because the actual x height will vary depending on the font family given the point value.

For now, EM units are more reliable than ex units: to get the best compatibility between different browsers, it's best to use EM units. Note, however, that both the EM unit and the ex unit cause printing problems.

The percentage unit is the third relative unit. This unit defines the length as a percentage value for the relevant length. According to the CSS specification, the relative length is either the size of the parent cell font or the width of the parent format unit--different situations vary according to the characteristics of the problem. An extremely important warning is that an existing browser does not calculate a percentage value relative to the cell width, and therefore does not correctly implement the percent length. Instead, all browsers calculate the percentage length that is independent of the font as a percentage of the width of the entire browser window.

The length value is formatted by a symbol (' + ' or '-', by default, ' + ') followed by a number followed by a unit identifier (a two-character abbreviation). There are two lengths of unit form: relative and absolute units. The stylesheet is easier to control from one medium to another in relative units (for example, from a computer to a laser printer). Percentage units and key values (such as ' x-large ') have the same advantages. As follows:

H1 {margin:0.5em} element font height

H1 {Margin:1ex} letter ' x ' height

Pixel units are relative to the screen's graphics resolution. If the pixel density of the output device is much different from the standard computer screen, the user adjusts the pixel value. The recommended pixel value is a 90dpi pixel density from the length of the reader's arm. The child element inherits the computed result value, not the relative value, such as:

BODY {
font-size: 12pt;
text-indent: 3em;
}
H1 { font-size: 15pt }

In the example above, the ' text-indent ' value for ' H1 ' is 36pt, not 45pt.

==================================

EM tags--Accent tags

* EM tags appear in pairs, start with <em> to </em> end

Property

* Common-General properties

* EM is the abbreviation of emphasis

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.