CSS Padding

CSS Padding property allows you to specify how much space should appear between the content of an element and its border .The value of this attribute should be either a length, a percentage, or the word inherit. If the value is inherit, it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box.

CSS Padding 5
<html>
<head>
<style>
div {
  padding: 100px;
  border: 10px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS Padding</h2>
<div>This element has a padding of 100px.</div>

</body>
</html>

CSS Padding-properties

CSS has properties for specifying the padding for each side of an element:

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

All the 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

Note: Negative values are not allowed.

CSS Padding-top

he padding-top CSS property sets the height of the padding area on the top of an element.

 <html>
  <head>
   </head>
   
   <body>
      <p style = "padding-top: 25px; border:5px red;">
         Learn top padding
      </p>
      
      <p style = "padding-top: 9%; border:4px solid black;">
         There is paragraph of top padding
      </p>
   </body>
</html>

The padding-top property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.

CSS Padding-left

The padding-left property sets the left padding (space) of an element. This can take a value in terms of length of %.

Here is an example 

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-left: 20px; border:5px red;">
         Learn about left padding
      </p>
      
      <p style = "padding-left: 15%; border:5px solid black;">
         Learn about left padding in percent
      </p>
   </body>
</html>

CSS Padding-right

The padding-right property sets the right padding (space) of an element. This can take a value in terms of length of %.

Here is an example 

<html>
   <head>
   </head>
   
   <body>
      <p style = "padding-right: 25px; border:5px solid black;">
         Learn about right padding
      </p>
      
      <p style = "padding-right: 10%; border:5px red;">
         Learn about right padding in percent
      </p>
   </body>
</html>

CSS Padding-bottom

The padding-bottom property sets the bottom padding (space) of an element. This can take a value in terms of length of %.

Here is an example 

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 5px solid yellow; 
  padding-bottom: 30px;
}
</style>
</head>
<body>

<h1>The padding-bottom</h1>

<p class="ex1">A paragraph with a 25 pixels bottom padding.</p>

</body>
</html>

CSS Padding-Values

<length>The size of the padding as a fixed value. Must be nonnegative.<percentage>The size of the padding as a percentage, relative to the width of the containing block. Must be nonnegative.

Initial value0
Applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter and ::first-line.
Inheritedno
Percentagesrefer to the width of the containing block
Computed valuethe percentage as specified or the absolute length
Animation typea length

CSS Padding and Element Width

The CSS width property specifies the width of the element’s content area. The content area is the portion inside the padding, border, and margin of an element (the box model).

So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.

Example

Here, the <div> element is given a width of 250px. However, the actual width of the <div> element will be 300px (250px + 25px of left padding + 25px of right padding)

Padding – Shorthand

To shorten the code, it is possible to specify all the padding properties in one property.

The padding property is a shorthand property for the following individual padding properties:

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

So, here is how it works:

If the padding property has four values:

  • padding: 25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px

Comments are closed.