</CSS3 Padding Property>

Here we will learn how to use padding properties in our web pages

CSS3 Padding

You can use padding property if you want some horizontal and vertical space from all directions.

{padding-left :  20px;}
                
property        value

Example

Here is an simple example of padding property
when applying padding property on a <p> tag.

When we run the code, we can see that the paragraph tag has a padding of 50px from left direction.


	<!DOCTYPE html>
<html>
	<head>
		<title>Button</title>
	</head>
<body>
<p type="submit" style="padding-left:50px;color:white;background-color:black;">
    TDB Tutorials
</p>
</body>
</html>

Try it Yourself

</CSS3 Padding Shorthand>

CSS3 padding property specifies a Shorthand property (all padding properties in one declaration)

CSS3 Padding Property

padding:10px

padding-top:20px

padding-right:20px

padding-bottom:20px

padding-left:20px


<!DOCTYPE html>
<html>
	<head>
		<style>
		.tdb-school{color:rgb(255,255,255);background-color:rgb(0,0,0);
			padding:10px 35px 10px 35px;border:none;border-radius:5px}
		.top{padding-top:50px}
		.right{padding-right:50px}
		.bottom{padding-bottom:50px}
		.left{padding-left:50px}
		</style>
	</head>

	<!--Body-->
	<body>
		<button type="submit" class="tdb-school padding">Padding</button><br><br>
		<button type="submit" class="tdb-school top">Padding</button><br><br>
		<button type="submit" class="tdb-school right">Padding</button><br><br>
		<button type="submit" class="tdb-school bottom">Padding</button><br><br>
		<button type="submit" class="tdb-school left">Padding</button>
	</body>
</html>

Try it Yourself

Padding Short-hand

this technique is used for all padding properties in single declaration

{padding : 10px 10px 10px 10px;}
                       
property    top right bottom left

padding:10px 10px 10px 10px

padding:10px 20px 30px 40px

	
		<!DOCTYPE html>
<html>
	<head>
		<style>
		.tdb-school{
			color:rgb(255,255,255);
			background-color:rgb(0,0,0);
			padding:50px 50px 50px 50px;
			border:none;
			border-radius:5px
		}
		</style>
	</head>

	<!--Body-->
	<body>
		<button type="submit" class="tdb-school padding">
		Padding
		</button><br><br>
	</body>
</html>

Try it Yourself

PADDING PROPERTY

</CSS3 PADDING>

It is used to give some space around the elements. There are some properties for padding i.e. padding-left, padding-top, padding-bottom, and padding right.

</CSS3 Padding Property>

CSS3 Padding

Example

</CSS3 Padding Shorthand>

CSS3 Padding Property

Padding Short-hand