Hello! Here are some examples of weird things that can happen with CSS. This site goes with the zine Hell Yes, CSS!.

All these examples are editable thanks to CodePen. Click "edit on CodePen" to play around with an example, and for a larger view where you can see the HTML / CSS / output all on one screen.

Table of contents

CSS isn't easy

Example: an inline-block element's vertical alignment changes if there's no text in it

Here's a weird thing to start out, just to illustrate that CSS can be pretty counterintuitive sometimes.


Example: CSS can mix properties from different rules


Example: rem vs em

Example: a single #id is more specific than many classes

inline vs block

Example: how an inline-block element looks

the box model

Example: margins can overlap

Example: padding and borders aren't included in an element's width/height by default

Example: you can use text-align: center to center inline-block elements

padding + margin syntax

Example: margins can be negative

Example: how to use the padding-bottom: 50% trick to make a fixed aspect ratio


Example: borders vs outlines

Example: different border-radiuses

Example: a few box shadows

Example: left: 0; right: 0 is different from width: 100%;


Example: basic flexbox properties

CSS grid: areas!

Example: using grid areas for a simple layout


Example: a few ways to do centering

position: absolute

Example: position: absolute isn't absolutely positioned on the page

making elements disappear

Example: display: none vs visibility: hidden

Example: putting an element on top of another one with z-index

stacking contexts

Example: an element with a higher z-index doesn't always appear on top


Example: a transition that happens on hover