21 Nov CSS – Padding
Learn about CSS Padding. It shows the space between the content of an element and its border. It has options such as padding-top, padding-bottom, padding-right, and padding-left to set margins for top, bottom, right, and left respectively.
The below figure explains wherein margin, padding, and border get placed around a content:
Let us see how to set padding on a web page around content.
CSS padding-top property (Set Top Padding)
To set the top padding of an element on a web page, use the padding-top property in CSS. Let us see an example and set the top padding:
<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
padding-top: 25px;
}
p.demo2 {
padding-top: 35px;
}
p.demo3 {
padding-top: 55px;
}
</style>
</head>
<body>
<h1>Studyopedia</h1>
<p>This is example text.</p>
<p class="demo1">This is set as top padding 25 px.</p>
<p class="demo2">This is set as top padding 35 px.</p>
<p>This is another example text.</p>
<p class="demo3">This is set as top padding 55 px.</p>
</body>
</html>
Output
CSS padding-bottom property (Set Bottom Padding)
To set the bottom padding of an element on a web page, use the padding-bottom property in CSS. Let us see an example and set the bottom padding:
<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
padding-bottom: 25px;
}
p.demo2 {
padding-bottom: 35px;
}
p.demo3 {
padding-bottom: 55px;
}
</style>
</head>
<body>
<h1>Studyopedia</h1>
<p>This is example text.</p>
<p class="demo1">This is set as bottom padding 25 px.</p>
<p class="demo2">This is set as bottom padding 35 px.</p>
<p class="demo3">This is set as bottom padding 55 px.</p>
<p>This is another example text.</p>
</body>
</html>
Output
CSS padding-left property (Set Left Padding)
To set the left padding of an element on a web page, use the padding-left property in CSS. Let us see an example and set the left padding:
<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
padding-left: 25px;
}
p.demo2 {
padding-left: 35px;
}
p.demo3 {
padding-left: 55px;
}
</style>
</head>
<body>
<h1>Studyopedia</h1>
<p>This is example text.</p>
<p class="demo1">This is set as left padding 25 px.</p>
<p class="demo2">This is set as left padding 35 px.</p>
<p class="demo3">This is set as left padding 55 px.</p>
<p>This is another example text.</p>
</body>
</html>
Output
CSS padding-right property (Set Right Padding)
To set the right padding of an element on a web page, use the padding-right property in CSS. To explain the concept, we have specified the right padding for the <p> to % of the width of the containing element.
Let us see an example and set the right padding:
<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
padding-right: 50%;
}
p.demo2 {
padding-right: 70%;
}
</style>
</head>
<body>
<h1>Studyopedia</h1>
<p>This is example text.</p>
<p class="demo1">This is set as right padding 50%.This is demo text. This is demo text. This is demo text.</p>
<p class="demo2">This is set as right padding 70%. This is demo text. This is demo text. This is demo text.</p>
<p>This is another example text.</p>
</body>
</html>
Output
If you liked the tutorial, spread the word and share the link and our website Studyopedia with others.
Read More:
No Comments