What is the difference between padding and margins?

For those interested in HTML and CSS, let's explore the distinction between the margin and padding CSS properties. These properties allow us to create empty space between HTML elements, preventing them from appearing too close together.

While both margin and padding serve similar purposes, each has its own unique characteristics.

[<h2>Padding</h2>] The padding property determines the inner margins of an element. It defines the distance between the content of an element and its border. In other words, it controls the space inside the element.

[<h2>Margin</h2>] On the other hand, the margin property is applied to the outside of an element. It affects the spacing between the element and other surrounding elements.

To better understand the concept, take a look at the following illustration:

As you can see, you have the option to define borders for each side of your HTML elements. Similarly, you can do the same with the margin and padding properties. By adjusting the values for the top, right, bottom, and left sides, you can control the spacing.

The values you can use include pixels (px), centimeters (cm), millimeters (mm), em units (em), x-height (ex), inches (in), picas (pc), and point sizes (pt).

To apply margin and padding to your elements, specify the values for each side in a clockwise direction, starting with the top. For example:

[<i>Example 1:</i>]

css
padding: 5px 15px 5px 15px;

• The top padding is 5px.
• The right padding is 15px.
• The bottom padding is 5px.
• The left padding is 15px.

css
margin: 10px 5px 10px 5px;

• The top margin is 10px.
• The right margin is 5px.
• The bottom margin is 10px
• The left margin is 5px

If you define a single value, the distance applies to all sides, so it will be applied to the 4 sides of the HTML element that you want to modify.

Example 2:
padding: 5px (top and bottom) 15px (left and right);
margin: 10px (top and bottom) 5px (left and right);

If it helps to do it visually, think of an A4 page of type inside a picture frame. The margin is the space between the edge of the sheet of paper and the other elements (the parts of the frame) and the padding would be the space between the edge of the sheet and where the type starts on the page. The border would be the edge of the sheet of paper.

It's probably easier to understand if you have borders, then it also becomes obvious which one to use. Do you want the "space" after the border (outside the element = margin) or before the border (inside the element = padding).