Categories
CSS Tutorials

Paddings

introduction
Formatting Text
Box Model
Advanced selectors
More about CSS
CSS Padding

CSS paddings are used to create white space around the HTML element , inside the defined border. We can set different values for each side of the HTML element(top, right, bottom, left). When we are applying padding property it is important to add border properties. 

Padding properties can have the following values:

  • Length in cm, px, pt, etc.
  • Width % of the element.

Syntax:

body{
    padding: size;
}

We can write padding property in two ways:

  1. Shorthand property
  2. Individual property 

In the shorthand property we can specify the padding for each side of the element in the following order:

  1. padding-top: it is used to set the width of the padding area on the top of the HTML element.
  2. padding-right: It is used to set the width of the padding area on the right side of the HTML element.
  3. padding-bottom: It is used to set the width of the padding area on the bottom side of the HTML element.
  4. padding-left: It is used to set the width of the padding area on the left side of the HTML element.

Note: Like margin, padding property also allows negative values.

If the padding property has 4 values:

Example:

<html>  
	<head>
		<style>
			h1{
				padding: 70px 110px 60px 70px;
				border: 1px solid black;
			}
		</style>
	</head>  
	<body>  
		<h1>Edupoly provides training on HTML, CSS, Bootstrap, JavaScript, Angular, ReactJS, NodeJS, ExpressJS and MongoDB</h1>  
	</body>  
</html>

Output:

In the above example 

padding-top value is 70px,

padding-right value is 110px,

padding-bottom value is 60px,

padding-left value is 70px.

If the padding property has 3 values:

Example:

<html>  
	<head>
		<style>
			h1{
				padding: 70px 110px 60px;
				border: 1px solid black;
			}
		</style>
	</head>  
	<body>  
		<h1>Edupoly provides training on HTML, CSS, Bootstrap, JavaScript, Angular, ReactJS, NodeJS, ExpressJS and MongoDB</h1>  
	</body>  
</html>

Output:

In the above example

padding-top value is 70px,

padding-right and left value is 110px,

padding-bottom value is 60px.

If the padding property has 2 values

Example:

<html>  
	<head>
		<style>
			h1{
				padding: 70px 110px;
				border: 1px solid black;
			}
		</style>
	</head>  
	<body>  
		<h1>Edupoly provides training on HTML, CSS, Bootstrap, JavaScript, Angular, ReactJS, NodeJS, ExpressJS and MongoDB</h1>  
	</body>  
</html>

Output:

In the above example

padding-top and bottom value is 70px,

padding-left and right value is 110px.

 If the padding property has 1 value:

Example:

<html>  
	<head>
		<style>
			h1{
				padding: 70px;
				border: 1px solid black;
			}
		</style>
	</head>  
	<body>  
		<h1>Edupoly provides training on HTML, CSS, Bootstrap, JavaScript, Angular, ReactJS, NodeJS with ExpressJS and MongoDB</h1>  
	</body>  
</html>

Output:

In the above example, padding-top, right, bottom, left values are 70px.

Note: margin and padding looks the same but the difference is margin creates empty space around the HTML element outside of the border and padding creates white space around the HTML element inside the border. Margin and padding can work without border. But to identify the difference we have used the border property here.