Dimension

Everything that exists has dimension: it has a height and a width and it takes up space. Things have borders to separate one thing from another. When more than one thing exists in an environment they have a relationship to each other.

The Box Model

CSS allows you to adjust the dimension and density of elements through The Box Model.

Every block level element is contained within a block. That block is made up of the margins, borders, and padding for that block. Putting margins, borders, and padding allows you to group similar content together.

`box-sizing` property

The box-sizing property controls how the browser calculates the size of your boxes. There are two basic settings for the border-box property: content-box (the size of the box for the content) and border-box (the size of the box up to and including the border).

Using the content-box value will add the declared height/width, padding sizes, and border sizes to give you a total size for the block that you’re declaring.

The box model for a 200 wide by 200 high element with box-sizing: content-box;.

Using content-box, the total size for a 200 pixel box with a 20 pixel padding and a 1 pixel border will be 242 pixels (200 + 20 + 20 + 1 + 1 = 242).

The border-box value seems to behave much more inline with how our minds work. When you set the box-sizing to border-box, the calculations are done by the browser and it will factor the padding and borders into the total dimensions, so that the total size of a 200 pixel box with a 20 pixel padding and a 1 pixel border will remain 200 pixels.

The box model for a 200 wide by 200 high element with box-sizing: border-box;.

You can see the difference that using content-box versus content-box as the value for your box-sizing property here:

content-box

border-box

Comparing content-box with border-box values on a box set to height: 150px; width: 150px; padding: 10px;.

I like to set the border-box property globally, with the following rule so that I never have to worry about it again:

*,:after,:before{ box-sizing: border-box; }

Unit Values

Here are the most common units you would use to set a property’s value.

Pixels

Without going into a detailed description of modern screen technology, a pixel is the size of one dot on your computer screen. Setting an element to 200 pixels by 200 pixels would look like this:

200px × 200px

Percentages

The targeted selector will be a percentage of the parent element.

100% width

This element only fills 45% of the parent container.

45% width

Em & Rem

An em and a rem are values based on font-size. em is based on the font-size of the parent element. rem is based on the font-size of the page’s root element (usually <html>).

Fonts can be measured in a variety of units, but pixel, em, and rem are most common. A pixel is a single dot on a screen. An em unit is the size of the letter m, but is equal to 16px. A rem unit stands for root em. It’s the size of the document set at the root element, usually with the :root or html selector.

Given that the current page’s font size for the root element on this page is set to 20px, a 10rem by 10rem box will fill 200px by 200px.

10rem × 10rem

Viewport Units

vh for view height and vw for view width. An element with a width set to 100vw will be just as wide as the visitor’s view width, regardless of the width of the parent element.

30vh × 30vw

Size Properties

Width Properties

Since most pages are on an infinite scroll the width property tends to carry more importance than the height property.

The min-width prevents the width of the element from becoming smaller than the expressed value.

The max-width prevents the width of the element from becoming larger than the expressed value. For example: the current page is set to max-width: 640px;.

Height Properties

height

The min-height prevents the height of the element from becoming smaller than the expressed value.

The max-height prevents the height of the element from becoming larger than the expressed value.

Overflow

The overflow property is what controls the presentation of the contents of an element, if the width and height are smaller than what is needed for the content.

Sample overflow

Density

Density, like proximity, is the relationship between elements. Proper use of the spacing within and between elements makes your content easier to digest.

You’ll often hear designers speak about white space. What they really mean is the density of your content. Think about the density of your content. You can make the spacing tightly packed, or expansive.

Margins

margin sets the spacing on the exterior of the box model. Margins on different adjacent elements will overlap each other. Setting a bottom margin of 1rem on one element, and a top margin of 1rem on the element below it won’t have a combined margin of 2rem between the two. The margins will overlap for a total of 1rem margin between the two.

Sample margins

margin: all sides

margin: 1rem;

margin: top/bottom, left/right

margin: 1rem 2rem;

margin: top, sides, bottom

margin: 1rem 2rem 3rem;

margin: top, right, bottom, left

margin: 1rem 2rem 3rem 4rem;

You can set the margin for the different sides individually with margin-top, margin-bottom, margin-left, or margin-right.

Setting margin: auto; will allow the browser to fill in the space. If you inspect the <body> element on this page, you will see.

margin: 0 auto;

That allows the body to have zero top margin, but effectively centers the <body> element.

Borders

border: 4px solid red;

border: 4px solid red;

border-top

border-top: 4px solid red;

border-bottom

border-bottom: 4px solid red;

border-left

border-left: 4px solid red;

border-right

border-right: 4px solid red;

border-color

border-color: blue;

border-color: top/bottom, sides;

border-color: red green;

border-color: top, right, bottom, left;

border-color: red green blue orange;

border-style

border-style: solid;

border-style: dashed;

border-style: dotted;

border-style: double;

border-style: groove;

border-style: inset;

Border Radius

Before CSS came to the rescue with border-radius, we used to have to use a complicated mess of images and tables to make a block with rounded corders.

border-radius

border-radius: 20px;

border-radius: 100%;

border-radius: 50% 10px 100% 10%;

border-top-left-radius

border-top-left-radius: 20px;

border-top-right-radius

border-top-right-radius: 20px;

border-bottom-left-radius

border-bottom-left-radius: 20px;

border-bottom-right-radius

border-bottom-right-radius: 20px;

Padding

padding sets the spacing on the interior of the box model.

padding: all sides

padding: 1rem;

padding: top/bottom, left/right

padding: 1rem 2rem;

padding: top, sides, bottom

padding: 1rem 2rem 3rem;

padding: top, right, bottom, left

padding: 1rem 2rem 3rem 4rem;

You can set the padding for the different sides individually with padding-top, padding-bottom, padding-left, or padding-right.

Aspect Ratio

The ascpect-ratio sets the preferred aspect ratio for the element. It can be overridden if you explicitly set the height and widht of the element.

aspect-ratio: 4 / 3;

4:3

16:9

1.85:1

1.61803398875:1 (The Golden Mean)

If you set either the height or the width of the element, then the aspect ratio will fill out the remaining dimension.

16:9 (300px width)

16:9 (200px height)

Then aspect ratio could be ignored if you explicitly set both the height and width properties.

16:9 (300px × 300px)