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
padding:10px 15px 10px 15px;<---this adds the space around the text
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
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.