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;.
margin border padding 20 1 20 200×200

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;.
margin border padding 20 1 20 158×158

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

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; }

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


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.


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, 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.


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.


border: 4px solid red;

border: 4px solid red;


border-top: 4px solid red;


border-bottom: 4px solid red;


border-left: 4px solid red;


border-right: 4px solid red;


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: 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: 20px;
border-radius: 100%;
border-radius: 50% 10px 100% 10%;


border-top-left-radius: 20px;


border-top-right-radius: 20px;


border-bottom-left-radius: 20px;


border-bottom-right-radius: 20px;


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;
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)