×

Html & Html5

The World's best Software Development Study Portal

CSS3

Introduction to CSS


CSS padding



In CSS we are also having the properties of spacing around elements content , inside from defined borders bu using the padding property. And these properties we can set to the following sides:-


  • padding-top
  • padding-right
  • padding-bottom
  • padding-left



Values we can implement here in padding properties:-


  • inherit: here padding been inherit from it's parent element.
  • %: padding we can specify in form of %.
  • length :specify length(in pt px cm etc.)





Let's understand this by the following program :-



<!DOCTYPE html>

<html>

<head>

<style>

p{ border:2px solid red;

      padding-top:10px;

      padding-right:5px;

      padding-bottom:15px;

      padding-left:20%;

}

</style>

</head>

<body>

<p> I am Manish </p>

<p class="red"> Hey I love India </p>

</body>

</html>



Output of the Program



I am Manish

Hey I love India



Padding (shorthand)



This allows you to take the space inside from the defined borders .

    Order of writing padding shorthand property
  1. padding-top
  2. padding-right
  3. padding-bottom
  4. padding-left



And the same above order we have to follow if we want to use padding shorthand property, we can also omit the properties if we want but the order than also remains the same .

Let's understand this by the following program



<!DOCTYPE html>

<html>

<head>

<style>

      .red{border:4px solid green;

      padding: 10px 20px 35px 20%;

}

</style>

</head>

<body>

<p> I am Manish </p>

<p class="red"> Hey I love India </p>

</body>

</html>


Output of the Program



I am Manish

Hey I love India


So we get the padding-top, padding-right, padding-bottom and padding-left by specifying these properties in single line.




Let's talk about all padding-properties



Property Description
padding A shorthand property for setting the padding properties in one declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element






CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute