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>

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. 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

CSS3 states that this property applies to all elements. However, CSS2 states all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.

Inherited?

Media

Visual

Animatable

Yes (see example)

Example Code

Official Specifications

CSS basic box model (W3C Working Draft 9 August 2007)
CSS basic box model (Editor's Draft)
CSS Level 2.1 (W3C Recommendation 07 June 2011)
CSS Level 1 (W3C Recommendation 17 Dec 1996)

Web.QHMIT.com