CSS 3 Tutorial Banner Image

CSS Padding Property- CSS Tutorial for Beginners

Views: 436

In our previous tutorial we discussed all about CSS margin property, how it is used and why is it used, the different variants of margin properties that help us on the go to create arranged and managed user interface, similar to margin, padding is also an important part of user interface development, in this tutorial we will learn about CSS padding property.

Previous Tutorial

CSS Margin Property- CSS Tutorial for Beginners

What is padding?

Padding is the space we put on sides of contents in any element.

css margin padding height width and border

CSS Padding Property- CSS Tutorial for Beginners

The CSS Padding Property

We can apply padding to our elements using the padding:value property. This property will set padding for all sides of the element.

Usage:

#my_div{

padding:10px;

}

Note: The rule will apply a 10 pixel padding to all sides of our h1 element.

The default value for padding is 0 (ZERO) for every side of any element, padding property can have following values:

  • Inherit: The value of padding inherits from its parent element.
  • Length: The length can be in percent (%), points (pt), pixel (px), inch (in) etc.
  • Initial: This will set the padding value to default which is 0 (ZERO).

 

CSS Padding Individual Sides

If we want to apply different padding inside each side of our element then it is also possible for us to define individual padding for each side of our element. Suppose we want our element to have a 5px padding on right, 4px on left, 10px on top and 10px on bottom, then we can use the following rules for our padding.

#my_div{

padding-right:5px;

padding-left:4px;

padding-top:10px;

padding-bottom:10px;

}

Note: The above set of padding rules will apply padding to each sides of element independently, it is not important to use rules for every side, padding can be applied to any side of element as needed.

CSS Padding Shorthand Property

With CSS Padding shorthand property different padding rules for each side can be applied in a single line. There are different ways for applying padding to element with CSS shorthand property.

  • Shorthand Property with One Value: if a single value is passed with CSS padding property, the value will be applied to all four sides. i.e. padding:10px; this rule will set a padding of 10 pixels to each side of the element.
  • Shorthand Property with Two Values: If two values are passed using CSS padding property then the first value is applied to top and bottom of element and second is applied to right and left of the element. i.e. padding:5px 10px; this rule will set a padding of 5 pixels to top and bottom and a padding of 10 pixel to left and right of the element.
  • Shorthand Property with Three Values: If three values are passed to CSS padding property then the first value is applied to top, second to right and left and third the last most to bottom of the element. i.e. padding: 10px 5px 15px; this rule will set a 10 pixels of padding to the top of element and 5 pixels of padding to left and right of the element and 15 pixels of padding to the bottom of element.
  • Shorthand Property with Four Values: If four values are used for CSS padding property then the padding will be applied to all four sides separately with different values as provided, the values are passed in clockwise order, padding: <top>  <right>  <bottom> <left>; i.e. padding: 5px 10px 6px 15px; this rule will set 5 pixels of padding to top then 10 pixels of padding to right then 6pixels of padding to bottom and at the last most 15 pixels padding to left.

 

Here is an example of padding applied to a div with #my_div id selector and the output.

CSS rules:

#my_div{
background:#966;
margin:0 auto;
width:500px;
padding-right:5px;
padding-left:4px;
padding-top:10px;
padding-bottom:10px;
}

 

HTML element:

<div id="my_div">
<h1>Hey I have a padding applied</h1>
</div>

 

Output:

Padding applied to element output

So now we know what is padding and how it can be used, the applications of padding make our pages look much managed and beautiful, in next tutorial we will learn another important rule of CSS which is border.

If you found this tutorial helpful, share with friends and in social media, if you have any suggestion or questions let me know in the comments below. Don’t forget to subscribe our notification and stay updated with new tutorials and tips we post.

Comments: 3

Your email address will not be published. Required fields are marked with *