Beginners Guide to Padding and Margins

How do I add space around my images or text?

Space is added via margins or padding.

Lets start with a square box,

You would want to adjust the padding – so padding refers to what is inside.

Let’s see the same box and text with 10px of padding added to the top and bottom, and 15px added to the sides.

so in your style.css you would have something like

#boxtest {
padding:10px 15px 10px 15px;<---this adds the space around the text
}

Margins

Perhaps the box is next to another box and you want to have a little space between them. In that case you would add a margin - margins set the space of elements from the outside edges.

Let’s add a top margin to the bottom box to give it some room, here are the same boxes after adding this to the bottom box style.

In your style.css you would have something like

#boxtest {
padding:10px 15px 10px 15px;<---Adds space around the inside text
margin:10px 0 0 0; <---Adds space to the top of the box itself
}

margins and padding work on a “clock” system

the first number is 12 or the top

the second number is 3 or the right

the third number is 6 or the bottom

the fourth number is 9 or the left

I hope this helps you to have a better understanding of padding and margins.