back to top

info(at)sypo.uk01539 741461

Shortening CSS: Margins and Padding

Posted on 7th September, 2018

By Mark Syred. Difficulty level: Basic

In styling customer's web sites, we make use of margin and padding a lot. They are a big help when it comes to making basic, fine-tuned adjustments to the position of HTML elements relative to each other.

Both margin and padding are used to provide white space between one div's content and another's. The difference between them is that margin is external and padding is internal. padding is part of the browser's calculation of a div's width and height, whereas marginsets the minimum amount of breathing space between one div and its neighbour. In addition, margin can be used to determine an element's position relative to its neighbours and can even be a negative value.

This is the first of a brief series of posts on shortening your CSS, something that is becoming increasingly important the more people access the internet on their phones, often without WI-FI access. Every letter, character, space or line-break you can shave off your CSS, saves one byte of data having to be downloaded. But, as such practice makes it harder for humans to read, in this blog, I'll be preserving the white space.

This paragraph illustrates the effect of 10px of padding on the top and bottom sides and 20px of padding to the left and right. The padding is coloured yellow whearas the margin is coloured red. The size of the top margin is 10px to the top, 20px to the right, 30px bottom and to the left is 40px wide. It's worth noting that neither margin, nor padding can be coloured. To achieve the desired effect, I've instead used border and box-shadow.

The CSS

There's a long way to achieve the desired effect, and a short way. Firstly...

The Long Way

You may, if you wish, target each side of a div or any other block element separately, as follows:

div {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

But, the values set for each side's margin and padding can be set in a single line. Browsers read these values in the order: top, right, bottom, left.

A long explanation of The Short Way

If all the values are different:

div {
    margin: 10px 20px 30px 40px;
    padding: 25px 35px 45px 55px;
}

If some of the values are the same, then they don't all need writing out. Browsers assume that the bottom margin is the same as the top, and the left is the same as the right, unless they are told otherwise.

div {
    margin: 10px 20px 30px;
    /* left margin is 20px, picked up from the expressed right value */
    padding: 25px 35px;
    /* bottom margin is 25px and left margin is 35px, from the expressed top and right values */
}

If all the values you wish to set for the margin or padding are the same, then only one value needs expressing as browsers will assume that all values are the same.

div {
    margin: 10px;
    padding: 15px;
}

That's it! Well, if you only have one div on your html page, which almost never happens.

Using the CSS Universal selector, *, you can make all elements in your html have the same padding and border. This includes headings, images and all paragraphs.

* {
    margin: 20px 10px;
    padding: 15px;
}

It can be a good idea to use this to reset all margins and padding to 0, as different browsers can ascribe different default values to html elements.

This website uses cookies to deliver the best experience whilst browsing. More info