Have you ever seen a webpage that seemed unfinished or just a little “off”? This can happen for a lot of reasons, but typically it’s most noticeable when elements on the page aren’t lining up. For instance, when text touches the edges of a table or when there’s no space between a row of images, it causes what’s known as visual tension. Layouts tend to be more appealing when content and space are in balance. Spacing and borders between elements can also help to better define the breaks between different pieces of content.

Without Spacing or Borders

This is the header div.

Introductory information is placed in here.

Down here is the body of the page, where the main content goes.

See how these divs are grouping multiple elements?

With Spacing or Borders

This is the header div.

Introductory information is placed in here.

Down here is the body of the page, where the main content goes.

See how these divs are grouping multiple elements?

CSS includes three different properties that help air out and organize webpage designs: padding, margin, and border. Padding adds space inside an element, margin creates space outside an element, and border draws a line around an element. A popular visualization for the application of these properties is called the Box Model.

In this lesson, we'll delve into the options and details of each of these properties. With a few minor adjustments, you will quickly see how much cleaner and more professional a design can look with a bit more space and precision.