❮❮ PREV NEXT ❯❯

CSS - Padding

Just like margins in CSS, padding is also used to create spaces around an HTML elements. Just that a margin is used to create spaces outside the HTML element and Padding is used to create space inside the HTML element.

What is CSS Padding?

Padding in CSS is used to create a hidden space inside an HTML element.

There are four properties that helps us create the padding in CSS.

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

Let us understand the four properties in action with the below example.

Example :

<html>
<head>
	<style>
		p {
			border-style: solid;
  			padding-top: 50px;
  			padding-right: 100px;
  			padding-bottom: 70px;
  			padding-left: 80px;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, if you see the above output, there are spaces around the  element.

<p>
	This is the first paragraph.
</p>

And the important thing to note is that the spaces are placed inside the  element. To illustrate that we have drawn a border across the  element.

And you can see the spaces are placed inside the border.

CSS padding has four properties, padding-top, padding-right, padding-bottom and padding-left.

And empty spaces are drawn around the  element due to the above properties.

<style>
	p {
		border-style: solid;
		padding-top: 50px;
		padding-right: 100px;
		padding-bottom: 70px;
		padding-left: 80px;
	}
</style>

Now, the above four properties can be clubbed into a single property called the padding property.

Let us see it next.

The padding property in CSS

The padding property in CSS is a clubbed version of padding-top, padding-right, padding-bottom and padding-left properties.

Let us rewrite the above example with the padding property.

Example :

<html>
<head>
	<style>
		p {
			border-style: solid;
  			padding: 50px 100px 70px 80px;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, in the above example, we have taken the values of padding-top, padding-right, padding-bottom and padding-left properties(From the previous example) and placed it into the padding property.

<style>
	p {
		border-style: solid;
		padding: 50px 100px 70px 80px;
	}
</style>

And we get exactly same number of spaces across the  element.

Difference between margin and padding in CSS

Let us see the below example to see the difference between margin and padding in CSS.

Example :

<html>
<head>
	<style>
		p.padding_example {
			border-style: solid;
  			padding: 50px 100px 70px 80px;
  		}
  		
  		p.margin_example {
			border-style: solid;
  			margin: 50px 100px 70px 80px;
  		}
	</style>	
</head>
	
<body>
	<p class="margin_example"> 
		This paragraph illustrates margin.
	</p>
    
	<p class="padding_example"> 
		This paragraph illustrates padding.
	</p>
</body>
</html>

Output :

So, if you see the above example, the  element illustrating margin has the spaces outside the border.

<p class="margin_example">
	This paragraph illustrates margin.
</p>

And the  element illustrating padding has the spaces inside the border.

❮❮ PREV NEXT ❯❯