The Developer Brains


PADDING PROPERTY

Web Designing | Web Development


SEE MORE














</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.



SEE MORE























</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 property use when you want equal margin from top, right, bottom and left direction.

  • padding-top:20px

  • Padding from top direction

  • padding-right:20px

  • Padding from right direction

  • padding-bottom:20px

  • Padding from bottom direction

  • padding-left:20px

  • Padding from left direction




<!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-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;

  • padding:10px 20px 30px 40px


  • padding-top:10px;
    padding-right:20px;
    padding-bottom:30px;
    padding-left: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


















what is the correct way of styling a block element using padding shorthand?
1. padding: top right left bottom;
2. padding: top left right bottom;
3. padding: left right bottom top;
4. padding: top right bottom left;



Check Now



CSS3 QUIZ







Next: CSS3 Border Property


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers