CSS padding and margin – Explained with 4 HTML elements

Purpose of CSS padding and margin properties

The padding property of CSS is used to add the space or gap between the content and border of the specified HTML element.

The margin property is used to add space or gap between different HTML elements.

The difference between the padding and margin can be understood by this figure.

You can also see the demo online to see the difference between the two.

See online demo and code

So we have three div elements. The first two are with margin properties and third is with padding property. The distance or space between the div elements is margin while space between the text inside the third div and its border line is padding.

In this tutorial, I will show you the examples of using the padding and margin properties with different HTML elements.

Syntax of CSS margin and padding

The syntax to use CSS margin property by single declaration:

1	margin: 50px;

 

This will set the space for all directions i.e. top, bottom, left and right. If you need to set the margin different for all directions, this can be done as follows by single declaration or shorthand:

margin: 10px 20px 50px 100px;

Where:

• 10px is for the top
• 20px for the right
• 30px is for the bottom
• 40px for the left

You may also set the margin by using each direction separately, as follows:

 

Note: You can use px, pts, cm etc. to define margin.

Syntax of padding CSS property

Just like the margin property, the padding property can be set by using the single declaration or shorthand way or by using each direction’s padding property separately.

By single declaration with one value:

1	padding: 50px;

 

For each direction in single declaration:

 

The padding order is same as in the margin property if you use four values.

For each direction separately:

 

An example to set padding and margin in an HTML list

In the introductory part, I have shown the padding and margin properties used in the div element. In this demo, a list is created with menu items that are basically links. The list is inside a div element. The list contains menu items in the form of hyperlinks.

The list is styled with other CSS properties, however, the output without using the CSS padding and margin properties is as shown below:

See online demo and code

By adding the padding of 10px for the links inside the <ul>:

padding: 10px;

The look will be:

See online demo and code

You can see, the padding added the space between the content and border of each link.

Just add the margin of 2 px in the link class and the look will be:

See online demo and code

The whole class for links inside the <ul> element is:

 

A padding demo with an HTML table

The following is a demonstration of padding CSS property in an HTML table. For that, I have created a table with a few rows. The table is styled by different CSS properties. Before showing what it looks with padding property, look at it without using the padding in table data <td>.

See online demo and code

By adding the padding to the table data class, the table will look as shown below:

See online demo and code

This is the style code that is used for the <td>. You can see all code of the above demo by clicking the link or image.

 

An example of margin and padding with form elements

You can also use padding and margin properties in form elements like text boxes, textarea, dropdowns, buttons etc.

Using the padding property in textbox means adding space between cursor inside the textbox and its border. The margin will add space between different textboxes or other form elements.

To make it clearer, let me design a form and show you the difference with and without using the padding and margin properties.

The initial outlook of the form without using the padding and margin properties is as shown below:

By adding the padding to the input class for textboxes and btn class for submit button, the form look will be as follows:

The padding for textboxes:

1	padding: 10px;

 

The padding in button:

1	padding: 9px 15px;

 

See online demo and code

To increase or decrease the space between the textboxes, you can use margin CSS property there. For the demo, I have used a negative value to decrease the distance in the input class.

1	margin: -3px;

 

The output will be as follows:

See online demo and code

You can see, the gap between textboxes is reduced by 3px after using the negative value in the CSS margin property.

You can also see, by using the padding property the distance between cursor inside the textbox and border line is increased which is styled with other CSS properties to make it look much better.

The “Save” submit button is also given the padding property:

1	padding: 9px 15px;

 

which is used to align text in all directions.