CSS is not only responsible for how elements look, it's also responsible for how elements are sized and positioned too!

This can be one of the most complicated and challenging parts of using CSS. Because of this, this tutorial will only cover the basics.

Display Modes

Each element is either inline-level or block-level

• Inline-level elements appear in-line with text, not disrupting the flow of the page
• Block-level elements do not appear inline, instead breaking the flow of text

By default, each element is either a block-level (like <p> elements) or inline-level element (like <span> elements). However you can also change the display mode of elements using the display CSS rule!

display: block;
display: inline;

The display rule can also be used to prevent elements from being displayed using the none value!

display: none;

If you want to prevent an element from being displayed without hiding its children, the contents value can be used!

display: contents;

Sizing

The Box Model

You can imagine each element as a box. The size of this box is determined by several things:

• Content: The size of the contents inside the box
• Padding: The distance between the contents of the box and the border of the box
• Border: The thickness of the border
• Margin: The distance between this box and other boxes

These parameters are used to determine the size of elements, along with how they're spaced.

Absolute Length Units

When setting a length value, such as the amount of padding or the thickness of a border, you must specify a unit of length.

Relative Length Units

Some length units change depending on which element uses them!

Percentage

The percentage % unit represents a percentage of the parent element's width or height!

em Unit

The em unit is relative to the parent element's font size.

It is multiplied by the parent element's font size to calculate the new size

• 1em = parent size/default size
• 2em = twice the size of the parent
• 0.5em = half the size of the parent
• etc

The rem unit is relative to the root element's font size.

Width and Height

To set the width and height of the content box, the width and height rules can be used.

width: <length>;
height: <length>;

box-sizing: content-box; /* default value */
/* to */
box-sizing: border-box;

display: inline-block;
width: 20%;
height: 20%;

Margin and Padding

To set the margin or padding of an element, the margin and padding rules can be used

margin: <length>;
padding: <length>;

To set the vertical and horizontal margin or padding separately, two values can be specified.

margin: <vertical> <horizontal>;
padding: <vertical> <horizontal>;

/* for example */
margin: 20px 40px; /* top and bottom: 20px, left and right: 40px */

You can also set the padding and margin for each side individually

margin: <top> <right> <bottom> <left>;
padding: <top> <right> <bottom> <left>;

/* or you can set them using individual css rules */

margin-left: <length>;
margin-right: <length>;
margin-top: <length>;
margin-bottom: <length>;

/* ... etc */

Positioning

Positioning elements in CSS can be quite complex. Each method (aside from float) could be an entire page. Because of this, only float is included in this tutorial.

Float

One of the most basic positioning rules you can use is float.

Float allows you to position an element inside its parent while also allowing inline text to flow around it!

float: left;
float: right;
float: none;

Without Float:

Using Float:

Further Reading

• For positioning items in a list, consider using flexbox
• For positioning items in a grid, consider using CSS grid