This example explores nested blocks - one block inside another.
These principles apply to ANY HTML block elements, but div blocks are used for convenience.

The outer block is called the parent and the inner block is called the child. It's literally one block container inside another block container as you can see in the source code.

The space between the two borders is the margin outside the child block PLUS the padding inside the parent block. By default, both blocks expand horizontally as much as they can. Also by default, both blocks shrink vertically as much as they can.


A previous lesson used the "margin auto" technique to center a block in the browser's viewport. The same technique can be used to center a child block within a parent block.

The child is constrained by the parent, so its left/right margins are auto calculated to center it WITHIN the confines of the parent.


These blocks are triple nested (3 deep) as you can see in the source code. The only styles each block has are a 1px border and 1px of padding.

This shows that when you nest blocks, the default behavior is that they basically form shells, like the layers of an onion. If you take away the 1px padding that's separating the 3 distinct borders, they would actually look like one solid border!

You may wonder how one would use triple nested blocks (or even deeper) in a Web page other than to create the cool triple border look of this example. But you will soon see how blocks are used for elaborate page layout structures that require blocks nested several deep!


This cool looking "telescoping" display box has 3 stripes around the outside.

You could construct this by nesting blocks 3 deep like just above, removing the padding, and using 3 different border colors. However, this nested structure is only 2 blocks deep!

Outer Stripe - border of parent block
Middle Stripe - padding inside parent block (color comes from background color of the parent block)
Inner Stripe - border of child block
Of course, the lightest grey on the inside is the background color of the child block.