Adding Spacing to Elements

If HTML elements are too close together, a webpage can feel cramped, and if they're too far apart, the page can appear empty.

So how can we adjust the spacing between elements? When managing spacing, we use margin and padding, which we've previously discussed.

This property is used to adjust the outer space around an element. Margin refers to the empty space surrounding an element, much like leaving space between two books on a shelf.

Margin allows you to add or remove space around an element to control the distance between multiple elements.

Margins can be specified with units like pixels (px) or percentages (%).

This property adjusts the inner space within an element. Padding refers to the empty space inside an element, similar to leaving space between a book's cover and its pages.

Using padding, you can add or remove inner space, affecting the distance between the content within an element and its borders.

Padding can also be specified with units such as pixels (px) or percentages (%).

For example, the following CSS code is an example of setting the margin and padding for a <div> element:

Copy
div {
  margin: 10px;
  padding: 20px;
}

This code adds a 10-pixel margin around the <div> element and applies a 20-pixel padding inside the <div> element.