FANDOM


In coding, there are several different units that can be used to define how wide or tall an element should be. These units are very simple, and easy to understand.

PixelEdit

A pixel is normally the smallest unit of measurement. It is also the only unit of measurement that is based of the resolution of the display rather than the size of it. Making an element 5 pixels wide will tell the element to display itself as 5 pixels wide on the viewer's display, no matter what the size or resolution of the display. This really very useful, and can be used when you don't want the size of something to depend on how big the display is. In CSS, a pixel is defined using the following syntax...

{ 
   border-width:1px; 
}

In this example, the only thing that's important is the "1px". That stands for 1 pixel. The word pixel is always abbreviated as "px", and always comes immediately after a number value. It can be both negative and positive.

PercentEdit

Percentage is also supported by most languages. Percentage will make an element a certain percent wide based off the maximum width of 100%. It is capable of going over 100%, but by doing that, it will overflow it's parent element. Percentages can be very useful when you want to change the width of something based off the size of the display. This can be specifically useful when creating websites for mobile devices, when other units such as pixel, can not be used as effectively. Percentages can also be negative values.

{ 
   border-width:100%;
}

Just like the last example, the 100% is the only important part at this point. In code, percentage is written the exact same way as it normally is.

Emphemeral UnitEdit

Em, (or Emphermal Unit) is is equivalent to the current font size. For example, if a paragraph is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt and change automatically to the font that the reader uses.

Below is an example of how it might look:

{ 
   font-size:14px;
}

/*Want to change the font?*/

{
   font-size 2em !important; /*Now the font size is 28 pixels!*/
}

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.