Box model

Boxes:

block boxes:
- The box will break onto a new line.
- The width and height properties are respected.
- Padding, margin and border will cause other elements to be pushed away from the box.
- If width is not specified, the box will extend in the inline direction to fill the space available in its container. In most cases, the box will become as wide as its container, filling up 100% of the space available.
inline boxes:
- The box will not break onto a new line.
- The width and height properties will not apply.
- Top and bottom padding, margins, and borders will apply but will not cause other inline boxes to move away from the box
- Left and right padding, margins, and borders will apply and will cause other inline boxes to move away from the box.

Part one Part two

Part three Part four

Paragraph #1

Paragraph #2

Paragraph #3

I am a paragraph. A short one.

I am another paragraph. Some of the words have been wrapped in a span element.

I am a paragraph. Some of the words have been wrapped in a span element.

I am a paragraph. A short one.

I am another paragraph. Also a short one.

I use the standard box model.

I use the alternate box model.

Margins, padding, borders:

Top → Right → Down → Left

Change my margin.

I am paragraph one.

I am paragraph two.

Change my borders.

Change my padding.

I am a paragraph and this is a span inside that paragraph. A span is an inline element and so does not respect width and height.