CSS padding

<!doctype html>
<title>Example</title>
<style>
table {
  width: 100%;
  font-size: 4vw;
  }
td {
  width: 50%;
  background: gold;
  vertical-align: top;
  text-align: justify;
  }
.padded {
  padding: 10vh;
  }
</style>
<table>
  <tr>
    <td class="padded">
      <h1>Padded</h1>
      <p>Auctor augue mauris augue neque gravida in fermentum. Euismod elementum nisi quis eleifend. Nec ultrices dui sapien eget mi proin sed libero. Praesent semper feugiat nibh sed. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Tortor at risus viverra adipiscing at in tellus. Velit sed ullamcorper morbi tincidunt ornare. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. A scelerisque purus semper eget duis. Tincidunt ornare massa eget egestas purus.</p>
    </td>
    <td>
      <h1>Not padded</h1>
      <p>Auctor augue mauris augue neque gravida in fermentum. Euismod elementum nisi quis eleifend. Nec ultrices dui sapien eget mi proin sed libero. Praesent semper feugiat nibh sed. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Tortor at risus viverra adipiscing at in tellus. Velit sed ullamcorper morbi tincidunt ornare. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. A scelerisque purus semper eget duis. Tincidunt ornare massa eget egestas purus.</p>
    </td>
  </tr>
</table>

View Output Full Screen Preview

The CSS padding property is CSS shorthand for specifying padding on all sides of an element.

In other words, the padding property is shorthand property for setting padding-top, padding-right, padding-bottom, and padding-left all at once.

Syntax

These values are explained below.

Possible Values

length: Allows you to specify a non-negative length value as the padding thickness. Negative values are invalid.
percentage: Allows you to specify a non-negative percentage value as the padding thickness. The percentage is calculated with respect to the inline size (usually the width) of the generated box's containing block. Negative values are invalid.

You can include these values between one to four times. If you supply only one value, it applies to all sides. If you provide two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial: Represents the value specified as the property's initial value.
inherit: Represents the computed value of the property on the element's parent.
unset: This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value

Depends on the value of each individual padding property (i.e. padding-top, padding-right, padding-bottom, and padding-left).

The initial value for these properties is 0.

Applies To

All elements except internal table elements other than table cells

Inherited?

Media

Visual

Animatable

Yes (see example)

Example Code

Official Specifications

CSS Box Model Module Level 4 (Editor's Draft)
CSS Box Model Module Level 3 (W3C Working Draft)
CSS Level 2.1 (W3C Recommendation 07 June 2011)
CSS Level 1 (W3C Recommendation 17 Dec 1996)

Browser Support

Browser support for CSS properties can vary, particularly for newer or experimental features. Check current browser compatibility before using a property in production, especially when supporting older browsers.

Initial Value

CSS properties have an initial value that applies when the property has not been explicitly set. The initial value is different from the value inherited from a parent element and may vary between properties.

Inheritance

Some CSS properties inherit their computed value from their parent element by default, while others do not. The inherit, initial, unset, and revert keywords can also be used to control how a property gets its value.

Vendor Prefixes

Most modern CSS properties use the standard, unprefixed syntax. Vendor-prefixed properties such as -webkit- are mainly relevant to older browser versions or specific features and should only be used when required by your browser support targets.