CSS and the Box Model

A cascading style sheet sees everything in your document as a box. We can see the edges of these boxes by showing their borders with the following rule:

.border { border: thin solid red; }

This is an <h1>

This is a <p>, which is a block element: it sits alone on the page with nothing to the left or right of it. This section of text is between <strong> tags, which is an inline element. Inline elements wrap around, and flow with text on the page.

This is just another <p>. Text rem ipsum dolor sit amet, consectetuer dipiscing elit. Praesent lorem justo, consequat vel, eleifend quis, adipiscing at, risus. Cras aliquam, magna et faucibus aliquet, tellus velit egestas metus, a consectetuer arcu turpis semper dolor. Sed risus enim, gravida ut, vulputate at, porta, mm metus, ultricies vitae, facilisis in, aliquam vitae, mi. is asu.

Margins and Padding

Every box has a margin area, a border, a padding area, and content. You can specify the thicknesses of these areas with the margin, padding, border properties.

A diagram showing the margin, padding, and border properties of a box.