The Box Model

By default, all browsers’ user-agent styles have an unfortunate default⁠— box-sizing: content-box;⁠—which means that the padding (and border ) exists outside the content inline-size / width or block-size / height⁠—so padding (and border ) is then an outset.

box-sizing - MDN
We’ll usually flip the default for this!

#

#

This is often unintuitive for designers and doesn’t fit with most web design patterns⁠—so it is very, very common (nearly universal) to instead override this to box-sizing: border-box;⁠—which makes padding and border exist inside the content dimensions. Then padding (and border ) is easier to think of as an inset.

_{W3C might have got this default wrong. Good ol’ CSS!}

The content area is the guts of the element, usually text or an image. Its dimensions are usually defined by the intrinsic size of that content, but also can be specified directly via width or height⁠—or inline-size and block-size . (More on those soon.)

Introduction to the CSS box model - MDN
Going inside-to-outside, the very inside.

Next comes padding, which adds space to the element’s area around the content. It’s easiest to think of this as an inset (if we’ve made our box-sizing the more-intuitive border-box , above):

Padding – MDN
There will be many of these links!

						section { padding: 1rem; }
section { padding: 1rem 2rem; }
section { padding: 1rem 2rem 4rem; }
section { padding: 1rem 2rem 4rem 2rem; }

		
		

						section {
	padding-top: 1rem;
	padding-bottom: 4rem;
	padding-right: 2rem;
	padding-left: 2rem;
}

		
		

						/* These physical directions: */
padding-top: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
padding-left: 1rem;





/* Also these physical sizes: */
height: 20rem;
width: 20rem;

		
		

						/* Map to these logical directions: */
padding-block-start: 1rem;
padding-inline-end: 1rem;
padding-block-end: 1rem;
padding-inline-start: 1rem;

/* And these shorthand for both: */
padding-block: 1rem;
padding-inline: 1rem;

/* Become these logical sizes: */
block-size: 20rem;
inline-size: 20rem;

		
		

Back to our box model, moving outwards, with border. Border is… the border around an element! It has its own border-color , border-width :

Border – MDN
Our first non-text design element! You are allowed.

The last part of our box is margin⁠—the space around an element, empty/​white-space area that is used to separate an element from its siblings. Like padding and border , you can specify it all around or on individual sides:

Margin – MDN
The space between things.

Custom properties (folks almost always say CSS variables) aren’t strictly units, per se⁠—but they’re used in conjunction with them. They allow you to codify the relationships in your design!

CSS Custom Properties Guide – CSS Tricks
Web guru Chris Coyier’s robust overview.

						/* Special “entire document” selector, akin to `html`. */
:root {
	/* Declare them: */
	--brand-color: #e42a1d;
	--base-spacing: 2rem;
}

main {
	/* Reference them: */
	color: var(--brand-color);
	padding: var(--base-spacing);

	/* Or build from them: */
	margin-block: calc(2 * var(--base-spacing));
}

		
		

CSS is big and massive and overwhelming and sometimes indefensibly nonsensical⁠—but remember that you can do a surprising amount with just these basic properties!

And no matter how complex it gets, it really always comes back to these basics.

By default, every element is static⁠—just meaning its normal, stacked position in the document.

_{You’ll rarely, if ever, actually set this yourself⁠—it’s the default!}

The first thing we might want to do is adjust an element from that normal static position, which we can do with relative positioning.

Once you have set position: relative; you can use the logical inset-block-start , inset-inline-end , inset-block-end , and inset-inline-start values (with any of the units, above) to move the element away from its default, normal position in the flow:

absolute positioning is somewhat similar to relative⁠—but instead of placing an element in relation to its own default position, it uses the position of its nearest positioned ancestor as the origin.

So absolute elements will go “up the tree” of parents and wrapper elements until they find one set to anything other than default/​static⁠—then the same offset properties the element around from there.

Importantly, position: absolute; also removes the element from the normal document flow⁠—meaning it no longer takes up any space in the page layout!

_{This is often used for exacting, specific design element placement. But it is inherently brittle⁠!}

fixed positioning also removes the element from the document flow, but it places elements with relation to the browser viewport⁠—the boundaries of the window or device.

So position: fixed; brings the element completely out of the page’s normal flow, like it is sitting on its own separate layer.

_{This is often used for things like navigation elements.}

The most recent addition to the position party, position: sticky; elements are placed according to the normal flow of the document, like static , until their nearest scrolling ancestor (usually the viewport) moves past them. The element is then stuck in relation to this element.

_{This is often used for headers on tables and lists.}

Okay, z-index is not strictly positioning⁠—it is a separate property. You can see that all these position properties have given us ways to make things overlap, and z-index is how we can decide the front-to-back ordering (think z-axis).

• z-index – MDN
  This can be tricky to work with!

By default, items that are lower in the HTML (coming after each other) are in front of higher, earlier elements:

A whole lot of things make a new stacking context (including most position changes) which is kind of like a group (or a Figma frame) that has its own internal depth/​overlap order.

• The stacking context – MDN
  Each of these is a stacking “group.”

No amount of internal z-index adjustments can “break” something out of that group⁠—which is one of the reasons why z can be really difficult to understand and tricky to use. But you can always adjust the z-index of the group, as we do here!

As we discussed, many HTML elements are block-level by default. But you can also set display: block; manually on an inline element, too. This would mean that it starts on a new line, takes up the full width available, and you can specify a block-size , inline-size , and use margin above and below:

And then going the other way, you can force block elements to be inline with display: inline; . They will no longer start on their own lines, will only take up as much space as their content/​children, and don’t accept block-size or inline-size (or any -block-start / -block-end ) properties:

You can also combine the qualities of block and inline with display: inline-block; . These elements take block-size and inline-size (and vertical margin ) like block-level elements, but do not start on their own line:

Setting display: none; hides an element visually (and from screen readers) in the document⁠—as well as taking it out of the flow. (Keep in mind the HTML is still there, if someone opens up the source code.)

This is a common way to hide/​show (by setting another display property) elements on the page, but it will reflow the document when applied⁠—as if the element is actually added/​removed from the HTML:

The declarations float: inline-start; and float: inline-end; take an element out of the normal flow and place it on the left or right side of its parent container.

Any text siblings will then flow around the element⁠—like a text wrap⁠—filling up any available space to its side. They will go as far up as the top of the floated element:

Since this takes the floated element out of the flow, if we want the following element (often another text block, like a <p> ) to not move up it needs to be cleared with clear: inline-start; , clear: inline-end; , or clear: both; .

Applied on the following element, it will make it stay entirely below (clear of) the floated element:

If you have a parent wrapper and no following element, there won’t be anything there to clear the float⁠—meaning the parent will collapse down to the size of the text content. Almost never what you want.

You can solve this broken look with a clearfix hack, which uses a pseudo-element as an ersatz last-child to clear the container.