Recently I’ve been doing some CSS training at work and one of the guys was having trouble understanding the difference between block and inline elements. I thought for a moment, and here is what I came up with to help him. Maybe it will help someone else, too.

Block-Level Elements Are Pipes

Block-level elements such as divs, paragraphs, and lists are like pipes—they typically occupy a well-defined space, and they often stack on top of each other like pieces of PVC pipe fitted together. Their job is to direct the “flow” of content where you want it to go. You can choose which kind of pipes you have and even decorate them.

Inline Elements Are Water

Inline elements like links, span, strong, and em are like water—they flow and take the shape of the container they are in. They take the path of least resistance. If the container they are in isn’t big enough, they will spill over where they’re not supposed to go. You can change the color, sweetness, and flavor of the water, but it’s still liquid.

If this analogy doesn’t help and you need more basic information, learn more about block and inline elements here and here.