Selected Reading
Q&A

CSS - Paddings

The CSS padding property is used to specify the space between the content of an element and its borders. This article will teach you CSS padding property and its constituent properties.

The value of CSS padding should be either a length, a percentage, or the word inherit. A padding property does not allow negative values. 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

The CSS padding property is a shorthand property to set the padding space around an HTML element. Let us see a simple example to set padding with a single length value, which is applied equally to all four padding sides. Here we add 5px padding on h2 element :

<html>
<head>
<style>
   div{ 
      border: 1px solid #aaa; 
   }
   h2{ 
      padding: 5px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>The padding can be seen around the text.</h2>
   </div>
</body>
</html>

You can set padding using any units, whether in pixels, inches, millimeters, or ems. The default value for margin is 0 (zero), so if you don’t set a padding value then no padding should appear around the element. To set a padding of quarter inche around h2 element, above code will be written as follows:

<html>
<head>
<style>
   div{ 
      border: 1px solid #aaa; 
   }
   h2{ 
      padding: 0.25in; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>A 0.25 inch padding can be seen around the text.</h2>
   </div>
</body>
</html>

CSS Padding vs No-padding

Consider the following example where first h2 element is having a padding around it where as next h2 element does not have any padding around it. Check out the difference by seeing its output:

<html>
<head>
<style>
   div{
      border: 1px solid #aaa;
   }
   h2.a{
      padding: 10px; background-color: #eee;
   }
   h2.b{
      background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2 class="a">The padding can be seen around this text.</h2>
      <h2 class="b">There is no padding around this text.</h2>
   </div>
</body>
</html>

CSS Paddings - Single-side Properties

CSS provides four separate properties to set padding for top, right, bottom, and left for an element. These properties are:

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

Following example shows how different padding properties can be set around an h2 element:

<html>
<head>
<style>
   div{
      border:1px solid #aaa
   }
   h2 {
      padding-top: 20px; padding-right:40px;
      padding-bottom:10px; padding-left:0px;
      background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>This h2 element has different paddings around it!</h2>
   </div>
</body>
</html>

CSS Paddings - Shorthand Property

CSS allows to set all the paddings using single statement. Following is the syntax to use padding as shorthand property:

h2 {padding: top right bottom left}

The value for padding properties can be in pixels, inches, ems, or centimeters, apart from percentage. So using the above syntax we can write our previous HTML code as follows:

<html>
<head>
<style>
   div{
      border:1px solid #aaa
   }
   h2 {
      padding: 20px 40px 10px 0px;
      background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>This h2 element has different paddings around it!</h2>
   </div>
</body>
</html>

CSS Paddings - Set Three Values

Three values can be passed to the padding as padding: 20px 40px 10px. In this case top padding will be 20px, right and left paddings will be 40px and bottom padding will be 10px.

Following is the example for the same:

<html>
<head>
<style>
   h2 {
      padding: 20px 40px 10px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>This h2 element has different paddings around it!</h2>
   </div>
</body>
</html>

CSS Paddings - Set Two Values

Two values can be passed to the padding as padding: 20px 40px. In this case top and bottom paddings will be 20px, right and left paddings will be 40px.

Following is the example for the same:

<html>
<head>
<style>
   h2 {
      padding: 20px 40px; background-color: #eee;
   }
</style>
</head>
<body>
  <div>
      <h2>This h2 element has different paddings around it!</h2>
  </div>
</body>
</html>

We have already seen an example for a single value passed as padding, which is applied to all the sides i.e. top, right, bottom and left equally. You can check the very first example to understand this scenario.

CSS Paddings - Mix up Units

CSS does not restrict usage of multiple units for specifying the values of padding, while specifying in shorthand property. That means one can pass values of length as pixel along with ems or inches, etc.

<html>
<head>
<style>
   h2 {
      padding: 20px .5in 3em 4ex; background-color: #eee;
   }
</style>
</head>
<body>
  <div>
      <h2>This h2 element has different paddings around it!</h2>
  </div>
</body>
</html>

CSS does not allow a negative value for either of the padding properties, where as you can set negative margin values for CSS margin properties.

CSS Paddings - Percentages

CSS Padding property can have a percentage value. Percentages are calculated in relation to the width of the parent element’s content area. For example a parent width is 500px and we set 10% padding for its child element then CSS will calculate 10% padding of 500px, ie. 50px pixles padding for the child element. Following is an example for the same:

<html>
<head>
<style>
   div {
      width: 500px; border:1px solid #aaa;
   }
   h2 {
      padding: 10%; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>H2 element with some paddings around it!</h2>
   </div>
</body>
</html>

We can also mix the percentage values with other length units for padding, though the meaning of percentage padding will remain same as explained above:

<html>
<head>
<style>
   div {
      width: 500px; border:1px solid #aaa;
   }
   h2 {
      padding-top: 0.5in; padding-bottom: 10%; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>H2 element with some paddings around it!</h2>
  </div>
</body>
</html>

Padding - Inline Elements

Padding can also be applied to inline elements but it will have absolutely no effect on the line height of these non-replaced elements.

An inline non-replaced element with a background color and padding will have a background that extends above and below the element, which can be observed in the following example:

<html>
<head>
<style>
   strong {
      padding-top: 0.5em; padding-bottom: 10%; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>This example is to demonstrate the padding applied for <strong>inline non-replaced elements, which is 0.5em</strong>. This will not have an effect on the line height.</h2>
   </div>
</body>
</html>

However, when padding values are set for the left and right side of the element, the case is different. Here you can see the space or padding applied.

<html>
<head>
<style>
   strong {
      padding-left: 50px; padding-right: 50px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>This example is to demonstrate the padding left and right applied for <strong>inline non-replaced elements, which is 50px</strong>. This will not have an effect on the line height.</h2>
   </div>
</body>
</html>

Padding and Replaced Elements

Padding can be applied to replaced elements whether it is block-level or inline, such as an image, iframe, or video elements. Padding of an inline replaced element does have an effect on the line height.

Replaced elements are those whose representation is outside the scope of CSS. Some of the common replaced elements are:

<iframe>
<video>
<embed>
<img>

Let us see an example for padding applied to a replaced element (<img>):

<html>
<head>
<style>
   img {
      padding: 25px; background:#eee; border:1px solid #aaa
   }
</style>
</head>
<body>
   <div>
      <h5>This example demonstrates the padding applied to a replaced elements.</h5>
      <img src="/images/logo.png" alt="logo">
   </div>
</body>
</html>

Padding - Related Properties

You can explore more examples on padding properties by visiting the sub topics listed in the following table:

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