HtmlCssMonk

Paddings in CSS | Learn Basic CSS

laptop, code, programming

DESCRIPTION

Padding is used to generate space between element’s content and it’s border. The value of this attribute should be either a length, a percentage, or the word inherit.

Padding properties can have the following values –

  • length – specifies a padding in px, pt, cm, etc.
  • % – specifies a padding in % of the width of the containing element.
  • inherit – specifies that the padding should be inherited from the parent element.

Simple Example of padding –

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding: 20px; border:1px solid black;">
         This paragraph has padding of 20px on each side.
      </p>
   </body>

</html> 

This Code will produce the following result on your webpage –

NOTE – Padding creates extra space within an element. In contrast, margin creates extra space around an element.


Syntax

To Apply padding to all four sides

padding: 1em;

For vertical | horizontal

padding: 5% 10%;

For top | horizontal | bottom

padding: 1em 2em 2em;

For top | right | bottom | left

padding: 5px 1em 0 2em;


Paddings Shorthand Properties

CSS allows you to set padding for each side individually .

  • padding-bottom specifies the bottom padding of an element.
  • padding-top specifies the top padding of an element.
  • padding-left specifies the left padding of an element.
  • padding-right specifies the right padding of an element.

EXAMPLES –

1. Padding-bottom

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-bottom: 20px; border:1px solid black;">
         This paragraph has padding of 20px on bottom side.
      </p>
   </body>
</html> 

This Code will produce the following result on your webpage –


2. Padding-top

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-top: 20px; border:1px solid black;">
         This paragraph has padding of 20px on top side.
      </p>
   </body>
</html> 

This Code will produce the following result on your webpage –


3. Padding-right

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-right: 20px; border:1px solid black;">
         This paragraph has padding of 20px on right side.
      </p>
   </body>
</html> 

This Code will produce the following result on your webpage –


4. Padding-left

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-left: 50px; border:1px solid black;">
         This paragraph has padding of 50px on left side.
      </p>
   </body>
</html> 

This Code will produce the following result on your webpage –


Next topic – Margin in CSS

Previous topic – Box model in CSS


Leave a Comment

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