Fat Cat Designs

Bespoke Web Design

A Guide To Using Padding and Margins

by

clock

Both padding and margins are used to create space.

Padding creates space within the element and margins create space between elements.

this is an example of an element without padding

As you can see the text is cramped and is hard to read.

.text-box-1{
border: 2px solid #000;
width:300px;
}

Let’s see the same box with padding applied to the sides, top and bottom.

.text-box-2{
border: 2px solid #000;
width:300px;
padding: 10px 15px 10px 15px;
}

As you can see the text now has more room and is easier to read.

If we had two of these boxes together without margins it would look like this.

Instead of being two separate elements they sit on top of each other.
Instead of being two separate elements they sit on top of each other.

To fix this problem we add a margin in this case we’ll add 10px to the top and bottom

The elements now occupy their own space.
The elements now occupy their own space.

.text-box-3{
border: 2px solid #000;
width:300px;
padding: 10px 15px;
margin: 10px 0 10px 0;
}

clock
Padding and margins work on a clock system

Padding and margins 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

avatar

Debra

Owner Fat Cat Designs

I am a freelancer in the Hamilton, Ont. area. I have been working with WordPress since 2004. First developing for myself and eventually for others. I discovered I have a love for code especially CSS. I am a strong supporter of social justice and human rights and enjoy working on blogs that reflect those values.

    Reader Interactions