In this padding tutorial, we will be using a <div> HTML tag to apply the styles.
What is padding?
Padding is the space between the element (on which the style is applied) and its child elements.
HTML snippet
<body>
<div>
Hello world
</div>
</body>
Consider the above HTML snippet. Here the <div> tag is present inside the <body> tag.
The text “Hello world” will be displayed on the top-left corner of the page.
To leave some space between the left edge and top edge of the body, padding property can be used.
CSS snippet
body{
padding-left : 100px;
padding-top : 20px;
}Output:
Space will be provided between the body and text according to the CSS.
Here, <body> is the parent element and so we assign the style to the body tag.
As the <div> tag is the child element of the <body>, it is aligned according to the padding values provided.
padding-top, padding-right, padding-bottom, padding-left
padding-top
specifies the space between the top of the applied element and its child elements.
padding-right
specifies the space between the right of the applied element and its child elements.
padding-bottom
specifies the space between the bottom of the applied element and its child elements.
padding-left
specifies the space between the left of the applied element and its child elements.
HTML snippet
<div>
Hello world! Welcome to Programming Tute!
This is a sample text placed as a placeholder.
This is a sample text placed as a placeholder.
This is a sample text placed as a placeholder.
This is a sample text placed as a placeholder.
This is a sample text placed as a placeholder.
This is a sample text placed as a placeholder.
This is a sample text placed as a placeholder.
This is a sample text placed as a placeholder.
</div>CSS3 Snippet
div{
background-color : #e1e1e1;
width : 400px;
padding-top : 100px;
padding-right : 50px;
padding-bottom : 100px;
padding-left : 50px;
}Output
Left and right padding will be 50px
Top and bottom padding will be 100px
padding (short-form with four parameters)
Instead of providing all the four properties, there is another short way of providing that.
Syntax
padding : {padding-top} {padding-right} {padding-bottom} {padding-left}
(The values are mentioned same as in clockwise order starting from 12)
CSS3 Snippet
div{
background-color : #e1e1e1;
width : 400px;
padding : 100px 50px 100px 50px;
}Output:
Left and right padding will be 50px
Top and bottom padding will be 100px
padding (short-form with three parameters)
If only three parameters are mentioned in the padding property, the last value (padding-left) will take the same value as the padding-right value.
Syntax
padding : {padding-top} {padding-right& padding-left} {padding-bottom}
(The values are mentioned same as in clockwise order starting from 12)
CSS3 Snippet
div{
background-color : #e1e1e1;
width : 400px;
padding : 100px 50px 100px;
}Output:
Left and right padding will be 50px
Top and bottom padding will be 100px
padding (short-form with two parameters)
If only two parameters are mentioned in the padding property,
- The padding-bottom will take the same value as the padding-top value
- the padding-left will take the same value as the padding-right value.
Syntax
padding : {padding-top&padding-bottom} {padding-right & padding-left}
(The values are mentioned same as in clockwise order starting from 12)
CSS3 Snippet
div{
background-color : #e1e1e1;
width : 400px;
padding : 100px 50px;
}Output:
Left and right padding will be 50px
Top and bottom padding will be 100px
padding (short-form with only one parameter)
If only one parameter value is mentioned, then all sides will take the same space.
CSS3 Snippet
div{
background-color : #e1e1e1;
width : 400px;
padding : 100px;
}Output:
Padding will be 100px for all the sides.
