When considering your web page layout the use of white space really matters. How you space the various elements in your design and how your text is laid out can make the difference between a user-friendly website where people stay, or a cluttered space people jump away from! This is where the concepts of padding and margin in CSS come in.

CSS Padding

Padding refers to the space between the outside of an element and the stuff inside:

1

To set a padding in your CSS, there are four properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

These can be set with any valid measurement: pixels (px), picas (pc), percentage (%), millimeters (mm), centimeters (cm) – etc.

There is a much more efficient way of setting the padding however. Where possible, always use the quickest way in CSS. Here are some shorter ways:

padding: 4 values

You can set all four of the above settings – top, right, bottom and left in the form:

.your-element{ padding: [top], [right], [bottom], [left]; }

.your-class{  padding:5px 10px 5px 10px;}

padding: 2 values

If you want the same padding on the top and bottom, and the same for the left and right, you can just specify 2 values:

.your-element{ padding: [top-and-bottom], [left-and-right]; }

padding: 1 value

Finally, if you want the same padding all the way around, then specifying one value is sufficient. So the two CSS Classes below give exactly the same result:

.your-class{  padding:10px 10px 10px 10px;}.your-other-class{ padding:10px;}

CSS Margin

By constrast, CSS Margin refers to the space between elements. So here’s our box from earlier, but replicated 3 times and spaced using margin-right.

1

As with padding, margin also takes:

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

And you can pass 1, 2 or 4 values if you just want to use margin: instead of the specific properties.

Watch for Browser Defaults

When creating your page be aware that browsers have hidden ‘default’ padding and margin values. For this reason many CSS grid systems have a good few lines of ‘reset’ code. In our snippet above, we had to set the margin value of the <p> tag, because it had some hidden margins in the browser I was using (Google Chrome in this case).

p{ margin:0 0 10px 0;}

You may find it helpful at the start of your stylesheet to reset all element’s margin and padding to zero so you have 100% control over that from the offset:

*{ margin:0; padding:0;}

box-sizing

The last principle when dealing with padding and margin is the issue of box sizing. By default, the width and height of all your elements is calculated using the both the padding and the margins of your elements. That can make calculating the size of any ‘wrapping’ element very annoying: every time you adjust the padding, you need to re-calculate the width of any container.

box-sizing however ensures that when you set the width of a containing element, that it is honoured, even if you adjust the padding of your ‘child’ elements. Here’s an example without using box-sizing.

1

Although we have set the container to width:650px; our elements don’t fit – the third box drops below the other two. Not cool.

However, as soon as we specify box-sizing:border-box; this happens:

1

This paves the way for us to create a grid system for a whole page layout, but you can see that everything fits now. Even if we were to increase the padding of the square boxes, they don’t overflow the container.

TL;DR CSS Padding and Margin

You should make good use of padding and margin in order to lay out your page correctly and provide space around all your items. But if you have a containing element you should use box-sizing to have proper control of your layout. If you have any questions, feel free to use the comments!

Spread the Word