In order to bring in the space between the edge of one element (the browser for example) and another, we have to understand sizing.
All sizing is done through a series of unit measurements. Depending upon what you are creating will depend upon what unit you are wanting to choose. Some units are based upon a physical size. For example, we can pick the units in for inches, mm for millimeters, pc for pics, or pt for points.
Print designers will often want to pick something familiar to them, like points, however, on a computer or mobile device screen, the number of pixels to an inch will vary from device to device. And since we cannot normally assume a device size, we cannot easily translate physical sizes to our devices. Your browser will attempt to interrupt these settings, but differences in browsers and devices can make it difficult to maintain.
Therefore, unless you are designing a style sheet that is meant for printing, avoid anything that uses a physical dimension.
Pixel sizing is fairly common, as you can assume that a pixel is relative to your screen, and therefore, a certain number of pixels will look good compared to another size of pixels. Many beginning designers start with pixel sizing as it is easy to understand and manipulate.
Alternatively you can use relative sizing. That is, sizing an element based upon its relation to another element. Percentages (%) are fairly easy, and based off of the relationship with the parent element. Ems and exs are based off the width of the capital letter M and the width of the lowercase x respectively. Differences in fonts and font sizes will be reflected due to the relative nature of this sizing.
Ems and Rems (relative ems) are most commonly used outside of pixels for sizing.
Note: Whenever you use a number for a size in CSS, you need to give a unit of measurement, unless that number is 0. Because 0 is nothing no unit is needed.
| Unit | Description |
| in | inches – 1in is equal to 2.54cm. |
| cm | centimeters. |
| mm | millimeters. |
| pt | points – one point is defined as 1/72 inch (0.353mm). |
| pc | picas – 1pc is equal to 12pt or 0.001inches. |
| px | pixel units. |
| em | the current font-size. |
| ex | equal to the x-height of the current font. |
| % | the percentage of the parent size. |
Sizing in CSS was originally found on Access 2 Learn
