HTML & CSS: Margins, Padding, and Display

Having spacing between things is often a very important part of styling and creating a webpage - there are two main types of this spacing in CSS, margins and padding.

margin

A margin is just empty space around an element - usually used to separate out one element from another. You can set margins to any side of an element (top, right, bottom or left) by simply using the margin- variant of properties - these are:

margin-top
margin-right
margin-bottom
margin-left

So if we wanted to put 20px of margin-top on the body section of our document to push down the top of the page a bit, we could do something like the following:

body {
	margin-top: 20px;
}

There is also a short-hand property for setting margins on elements. Unsurprisingly it's simply using the margin property. If you give this one value, then it will apply this much margin to each side of the specified element (for example margin: 20px; will put 20px of margin on the top, right, bottom and left of the element). If you give this two values it will create margins of the size of the first value on the top and bottom of the element, and then margins the size of the second value on the left and right. If given four values, the margin will apply in the clockwise order of "top, right, bottom, left". For example:

body {
	margin: 150px 25px 20px 25px;
}

You can set margins for any block or inline-block elements - we talked about these in the HTML Basics tutorial. You could easily set different margins on all paragraphs on a webpage, like so:

p {
	margin: 10px 40px 5px 55px;
}

As a quick side-note, it is completely valid to have negative margins too (and these are really useful in certain circumstances.

The diagram below shows a margin (in this case on the top of a division - we'll learn about divisions in a later tutorial) and should give you a feel for what it looks like (it's the space above the yellow box):

padding

Adding padding is much like adding margins, except instead of putting gaps between two elements, padding is "filling" that gets joined on to the element which it's applied to. It will change the total size of the element itself, by joining material that cannot be used up by content. Padding can be achieved in exactly the same way as margins (you can set top, right, bottom, left and even use the shorthand property in the same syntax), but obviously instead of using the margin property - using the padding property:

body {
	padding: 20px;
}

p {
	padding-bottom: 15px;
}

The diagram below shows padding (in this case on all the sides of a division) and should give you a feel for what it looks like (it's the filling that stops the text hitting the yellow container):

display

Sometimes for separating out different elements for styling (and remember, CSS should really be used for all the styling aspects as these should not clutter your HTML), margins and padding just don't cut it. Perhaps you want something to always take up a new line, or perhaps you want something to always display on the same line as something else. In fact, now that you think about it, you want something to have a different display property - you want to change an element's display to either block, inline, inline-block or none. Well luckily for you (and the rest of us web designers) there is an extremely useful property called the display property, and it does exactly this! Just like margins and padding, it's not as amazingly useful right now as it will be later on in the tutorial series, since we don't yet know how to target individual elements - but even at this point it's very useful.

The usage is pretty much what you'd expect. You simply using the display property and then set it to one of the four different possible values (which we've previously talked about). So if we wanted all anchor tags (links) on the page to be block elements, we could do something like this:

a {
	display: block;
}