CSS Dimensions

CSS supports several types of units for dimensions. The common ones are pixels like so:

.MAINdialog{
   height: 1000px;
}

This says elements which have the class “MAINdialog” need to have the height 1000px. See (CSS Selectors)

Another common unit is “em” which means the width of the letter “M”. This is useful for sizing things proportional to the font size being used in the element:

.MAINdialog{
   height: 20em;
}

The above suggests a size for 20 lines of text. Why do you think they choose the letter M?

Mainly because it’s the widest letter so 20em should be enough to fit 20 arbitrary letters.

One can also set units to be a percentage:

.CTRLpanel{
   width: 10%;
}

Another important dimension for modern CSS is the “fr” dimension which comes from flex CSS - but is used in the grid layout to indicate a relative division of what ever space is available in a grid layout. See laying out a page with grid for a good example of this.

Another interesting unit I want to learn more about is “rem”. This is useful for mobile friendly development.

Concepts

CSS Dimensions

Related pages