Padding

Padding is the space between an element's contents and border. It is still within the element itself, not around it

Unlike many other CSS properties, padding is not inherited from parent elements. You must explicitly set it on the elements where you want it.

How to set padding

Setting padding is as simple as giving the padding property a space value via:

  • pixels

  • em/rem

  • a percentage

HTML

<h1>The art of making Bread!</h1>

<p>Bread making can be intimidating. The fact is that it's a simple craft. 
No fancy machinery or secret recipe. There is some basic science behind yeast 
but it's difficult to mess up. Bread making is far more forgiving than most 
people realize.
Ingredients are simple. 
The basics are the same across continents...water, flour, yeast. 
Fat - 1 tbsp plus... adding some vegetable oil is an easy way to make 
breadmaking more forgiving.
Simply pour into the mixing bowl. If it's your first bread and you need a 
measurement use 2tbsps (1oz, 15mils)
Liquid - 3 cups plus... again, the exact amount doesn't matter. 
I try to match water to milk at a 50/50 ratio. 
The milk serves as a preservative to double the shelf life from 3 to 6 days. 
You could just as easily use all water. 
Use at least 3 cups to make enough for a couple loaves.
Flour - say 6 cups plus... honestly I couldn't tell you. 
When it comes to adding the dry you are trying to create a dough that has the
right consistency. 
All you'll need to do is add more flour till the dough is right.
Salt - a couple shakes... For your first bread just add the amount you would 
add to cookies or a cake. 
Something like a 1/2 teaspoon is fine. 
They say salt slows the yeast... you'll never notice.
</p>

CSS

body {
    font-family: Futura;
}

h1 {
    color: #B33C86;
    border: 10px solid #B33C86;
}

p {
    color: #190E4F;
    border: 5px solid #190E4F;
}

Setting padding in pixels

Adding padding in pixels is a great way to set padding that never changes. Regardless of the text size the user has set, the padding will always be shown at the same size.

Select your element, declare a padding property, and set it to a numerical value in pixels:

h1 {
    padding: 10px;
}

p {
    padding: 10px;
}

Setting padding in em/rem

You can also set padding as an em or rem value. The padding value will then be relativeto the element's text size. If an h1 has a font-size of 32px, 1em of padding would be 32px. If a p has a font-size of 16px, 1em of padding would be 16px.

Setting padding with a relative unit like em or rem means that if a user has a default font size set in their browser, your design will be relative to that font size. This could allow for more design consistency.

h1 {
    padding: 0.5em;
}

p {
    padding: 1em;
}

Setting padding via percentages

You can also set padding as a percentage value. The percentage is relative to the widthof the containing element. This is a bit abstract, so stick with me.

Take the following example of a paragraph within the body of your page:

<body>
    <p>My paragraph</p>
</body>

Say that:

  • the body of the page is 850px wide.

  • the paragraph inside the body is 300px wide.

If you set padding: 10% on the paragraph element, the paragraph's padding will be 85px (10% of 850px); not 30px (10% of 300px).

Padding percentages are not relative to the width of the element itself; they're relative to the width of its containing element.

To calculate your ideal padding value as a percentage, here's some easy math:

padding as percentage = desired padding in pixels / width of containing element * 100

In the previously example, a body contains the heading and paragraph. Because the body is 500px wide, the h1's padding (5%) will be 25px. The paragraph's padding (3%) will be 15px.

h1 {
    padding: 5%;
}

p {
    padding: 3%;
}

Setting multiple padding values

You'll often want to set one vertical padding value and another horizontal padding value. Let's take the case of buttons; it's a little too intense to have 30px of padding on every side of a button (top, right, bottom, and left):

You can set top, right, bottom, and left padding values in that order:

p {
    padding: 5px 30px 5px 30px;
}

🛑 Remember the acronym TRBL (top, right, bottom, left) if you have a hard time remembering the value order.

If the top/bottom values are the same, and the left/right values are the same, you can also just set two values: one for the top/bottom padding and another for left/right padding.

p {
    padding: 5px 30px;
}

How to add space between margins ?🤔

Margin is the CSS property that controls spacing between elements. In this diagram, see how it relates to the other layout elements you've seen so far:

An element has padding around it, which is then surrounded by a border, which then has margins outside of it that determine the space between this element and its neighbor(s).

How to set margins

Margins are similar to padding in that they can be set as:

  • pixels

  • em/rem values

  • percentages that are relative to the width of the containing block.

Margins also can have a value called auto that is useful for centering content. We'll see it at the end of the chapter.

Let's start with checking out an example using a paragraph and some images:

Here's the HTML and CSS for the example below:

HTML

<p>Best practices think tank social impact agile mobilize. Relief replicable citizen-centered; the resistance inspire.</p>

<img src="https://images.unsplash.com/photo-1481402665672-0a280f0e9845?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f572b8be919dd72727de32df24f7fcfe">

<img src="https://images.unsplash.com/photo-1482148454461-aaedae4b30bb?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=150b97749895691afb8e046df5bce838">

<img src="https://images.unsplash.com/photo-1446714276218-bd84d334af98?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b1d696434ea0bb834407b989b34b2f8b">

CSS

body {
    width: 700px;
    text-align: center;
}

p {
    font-family: 'Minion Pro';
    background-color: black;
    color: white;
    padding: 10px;
}

img {
    width: 150px;
    border: 10px solid black;
}

Now that you've seen the HTML and CSS for our example, let's go ahead and set some margins!

Setting margins via pixels

Adding margins in pixels is a great way to set margins that never change, regardless of the size of the element or the text size involved.

Let''s select the image element, declare the margin property, and set it to 20 pixels:

img {
    margin: 20px;
}

By specifying one single value, you set the top, bottom, right, and left margins all to the same amount. Now, 20px of margin has been added to the top, left, bottom, and right of each image element. This means that there's more space between:

  • the paragraph and the images, which is a result of the image's top margin value

  • the images themselves, which is a result of the image's left and right margin values

Setting margins in em/rem

You can also set margins using em or rem values. The margin value will then be relative to the element's text size. If an h1 has a font-size of 32px, a 1em margin would be 32px. If a p has a font-size of 16px, a 1em margin would be 16px.

Setting margin with a relative unit like em or rem means that if a user has a default font size set in their browser, your design will be relative to that font size. This could allow for more design consistency. 

img {
    margin: 1em;
}

Setting margins via percentages

You can also set margins as percentage values. Like we saw in the last chapter for padding, the percentage is relative to the width of the containing element.

Take the following example of a paragraph within the body of your page:

<body>
    <p>My paragraph</p>
</body>

Let's say that:

  • the body of the page is 850px wide.

  • the paragraph inside the body is 300px wide.

If you set margin: 10% on the paragraph element, the paragraph's margin will be 85px (10% of 850px); not 30px (10% of 300px).

Margin percentages are not relative to the width of the element itself; they're relative to the width of its containing element.

To calculate your ideal margin value as a percentage, here's some easy math: 👇

margin value as percentage = desired margin in pixels / width of containing element * 100

img {
    margin: 1%:
}

Setting multiple margin values

You'll sometimes want to set top/bottom margins that are different than the left/right margins.

You can therefore set top, right, bottom, and left margin values in that order:

img {
    margin: 0px 30px 0px 30px;

If your top/bottom values are the same, and your left/right values are the same, you can also just set two values: one for the top/bottom margins and another for left/right margins.

img {
    margin: 0px 30px;
}

Why is there still some space between the paragraph and the images in the example above, even though the margin is 0?

Good question. Default spacing between elements can be tricky to control. That space is the paragraph's default margin that you didn't specify; paragraphs have 16px of margin around them by default.

In order to get rid of that space, you'd have to work on the paragraph's margins or set a negative top margin value for the images (yes, negative values are possible!):

img {
    margin: -16px 30px 0px 30px;
}

Collapsing margins

Margins exhibit one unusual feature: vertical margins collapse.

Let's say you have the following elements stacked on top of each other:

  • one element that has a bottom margin of 30px

  • one element that has a top margin of 20px

The vertical margin between them seems like it would be 50px. After all, 20 + 30 = 50. In reality, the vertical margin between them will be 30px. When there are two different vertical margin values touching each other, only the largest of the two will be kept. This applies to block elements.

HTML

<p id="one">Make the dough.First, lightly oil a 1kg loaf tin and 
set aside. In a large bowl or mixer, combine 500g strong white bread flour, 
1½ tsp fine salt and 1 tsp golden caster sugar and mix well. 
Add 7g fast action yeast and mix again. Gradually stir
in 300ml warm water until you have a dough that is tacky, 
rather than sticky</p>

<p id="two">
Knead the dough
On a lightly floured surface, knead by hand for 15 minutes or 7-10 minutes 
in an electric mixer, until the dough is smooth and elastic. Kneading is crucial;
it allows the gluten in the flour to get to work, becoming more elastic and
helping the bread to rise. Form into a smooth ball. Lightly oil a clean bowl,
put the dough into it, then cover with cling film or a tea towel and leave to
rest in a warm place for 2 hours or until the dough has doubled in size. 
Proving allows tiny air bubbles to form, which strengthen the structure of 
the bread, making the dough extra light and much bigger. </p>

CSS

one {
    margin-bottom: 30px;
}

#two {
    margin-top: 20px;
}
PreviousCustom bordersNextPositioning Content

Last updated