Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Define Paddings for Individual Sides in CSS
CSS allows us to set side specific padding for elements. We can easily specify padding sizes for individual sides of an element. The padding-top, padding-right, padding-bottom and padding-right properties define the top, right, bottom and left padding respectively. The padding shorthand property can also be used to achieve the same output by specifying values in clock-wise direction.
Syntax
The syntax of CSS padding property is as follows −
Selector {
padding-top: /*value*/
padding-right: /*value*/
padding-bottom: /*value*/
padding-left: /*value*/
}
Set the Shorthand Padding Property
The shorthand padding property can also be used to set padding. This sets for each side of an element by just mentioning padding instead of using all the below properties −
padding-top padding-right padding-bottom padding-left
Example
Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: 2em 1em;
padding: 3%;
background-color: plum;
letter-spacing: 0.05em;
}
span {
padding: 0 53%;
border-right: dashed;
background-image: linear-gradient(to right, lavenderblush, lightblue);
font-size: 1.4em;
font-style: italic;
}
</style>
</head>
<body>
<h2>Badminton</h2>
<article>
<span>Badminton is a game played between two or four players. Both teams have to make points in order to defeat the other team.</span> Badminton as battledore and shuttlecock is played with sides across a string suspended some five feet above the ground. The sport tests player’s athletic stamina, agility and good motor coordination skills.
</article>
</body>
</html>
Set Padding Individually
Here, we have considered all the padding properties for all individual sides −
padding-left: 30px; padding-top: 44px; padding-bottom: 60px; padding-right: 70px;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 400px;
padding-left: 30px;
padding-top: 44px;
padding-bottom: 60px;
background-image: linear-gradient(to bottom, oldlace, lightblue);
border: thin solid;
text-align: center;
}
div > div {
padding-right: 70px;
}
</style>
</head>
<body>
<h2>Basketball</h2>
<div>Basketball is a team sport played by two teams of five players each. It is played on a rectangular court.
<div>The players try to score by shooting a ball through a hoop elevated 10 feet above the ground.
</div>
</div>
</body>
</html>
Updated on: 01-Nov-2023
64 Views
Advertisements