Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
The Padding Shorthand Property in CSS
The padding property in CSS allows you to set the padding for padding-top, padding-right, padding-bottom, padding-left. It is a shorthand property.
For example
padding:10px 5px 7px 10px;
Here,
top padding is 10px
right padding is 5px
bottom padding is 7px
left padding is 10px
Syntax
The syntax of CSS padding property is as follows −
Selector {
padding: /*value*/
}
The value can be −
padding-top
padding-right
padding-bottom
padding-left
The following examples illustrate CSS padding shorthand property −
Padding property with all the values
The padding property with all the values sets values for the top, right, bottom, and left properties −
padding: 35px 70px 50px 40px;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
p.demo {
border: 2px solid blue;
padding: 35px 70px 50px 40px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is a demo text.</p>
<p class="demo">This is another demo text.</p>
<p>Another demo text</p>
<h2>Demo Heading2</h2>
<p>Demo text</p>
</body>
</html>
Padding property with three values
The padding property with three values. The top padding is 35px. The left and right properties are 70px. The bottom padding is 50px −
padding: 35px 70px 50px;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
p.demo {
border: 2px solid blue;
padding: 35px 70px 50px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is a demo text.</p>
<p class="demo">This is another demo text.</p>
<p>Another demo text</p>
<h2>Demo Heading2</h2>
<p>Demo text</p>
</body>
</html>
Padding property with two values
The padding property with two values i.e., the top and bottom margins are 2em. The left and right properties are 3em −
padding: 2em 3em;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
width: 300px;
padding: 5% 10% 20% 5%;
background-image: url("https://www.tutorialspoint.com/images/home_tensor_flow.png");
text-align: center;
font-weight: bold;
font-size: 1.2em;
box-sizing: border-box;
}
div > div {
border-radius: 80px;
padding: 2em 3em;
box-shadow: 0 0 4px 0.8px black;
}
</style>
</head>
<body>
<div>Learn TensorFlow
<div>TensorFlow is an open source machine learning framework for all developers.</div>
</div>
</body>
</html>
Padding property with a single value
The padding property with a single value i.e., all the padding properties are set to 2em −
padding: 2em;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
width: 100px;
padding: 5% 1%;
background-color: papayawhip;
border-radius: 5%;
box-sizing: border-box;
}
div > div {
width: 50px;
height: 50px;
border-radius: 50%;
padding: 2em;
box-shadow: 0 0 9px 1px black;
}
span {
padding: 10px;
}
</style>
</head>
<body>
<div>
<div></div>
<span><i>button</i></span>
</div>
</body>
</html>
230 Views
