When it comes to CSS, there are a lot of properties that control the spacing of elements on a page. Two of the most common properties are margin and padding.

Both margin and padding control the amount of space around an element, but they do it in different ways.

Artboard-1
This image comes from Kevin Powell's excellent freeCodeCamp tutorial on the CSS Margins.

Margin is the space outside of an element. It is the space between an element and the elements around it.

If you want an element to be farther away from other elements, increase the margin property.

Padding is the space inside of an element. It is the space between an element and its content.

Example of Margin in CSS

Here is how you would give an element a margin in CSS:

.element {

  margin: 10px;

}

Example of Margin in HTML

And here's how you would style the element to have a margin using in-line in HTML. (Keep in mind that this is seen as a lazy practice in most cases.)

<div style="margin-top:100px;">This is some text.</div>

Example of Padding in CSS

Here is how you would give an element padding in CSS:

.element {

  padding: 10px;

}

And of course, you can do this with an in-line style in HTML as well:

<div style="padding-top:20px;">This is some text.</div>

That's it. Go forth and style your elements.

I hope you've found this helpful. If you want to learn more about programming and technology, try freeCodeCamp's core coding curriculum. It's free.