CSS Basics: All You Need to Know about Padding

CSS Property padding – Inner Spacing of a Box

While margin is used to create extra space around an element, the padding property provides additional space inside the borders of an element. Padding is defined as the space between the content of an element and its border.

Padding is the shorthand property for rhe following four properties:

padding-top	top inner spacing
padding-right	right inner spacing
padding-bottom	bottom inner spacing
padding-left	left inner spacing

Schematic repredentaion of inner space - Padding — Schematic of **Inner Spacing** – padding

CSS Property padding
Description	Possible Values	Default Value	Category
inner space	length in px or em percentage auto initial inherit	0	box model spacing

The value shown in orange is the standard use of the CSS padding property.

Note:

Padding is used to create spacings inside the borders of an HTML element. The CSS padding property allows you to specify exactly how much space should appear between the content of an element and its border. The inner spacing can be set individually for all four sides (top, right, bottom, left) of the element. It is usually specified in px, em or as a percentage.
The content area, including padding, defines the Content Box of the element. So you need to add the padding area to the content area to get the total width and height of the element.
For padding, 1, 2, 3 or 4 values can be given to specify the inner spacing between the content area and the border.
- one value
  The value applies to each of the four sides.
- two values
  The first value specifies the vertical inner spacing to the top (padding-top) and to the bottom (padding-bottom),
  the second value value specifies the horizontal inner spacing to the left (padding-left) and to the right (padding-right).
- three values
  The first value specifies the inner spacing to the top (padding-top),
  the second value specifies the horizontal inner spacing to the left (padding-left) and to the right (padding-right),
  the third value specifies the inner spacing to the bottom (padding-bottom).
- four values
  The values are given clockwise, starting with the inner spacing to the top, i.e.
  the first value specifies the inner spacing to the top (padding-top),
  
  the second value specifies the inner spacing to the right (padding-right),
  
  the third value specifies the inner spacing to the bottom (padding-bottom),
  
  the fourth value specifies the inner spacing to the left (padding-left).
The padding area always has the same background color as the content area.
Negative values for padding are not allowed.

Example CSS

div {
  /* outer spacing: 1em vertical, 2em horizontal */
  margin: 1em 2em;

  /* background: antiqueWhite */
  background: #faebd7;

  /* border: gold */
  border: 0.0625em solid #ffd700;
}


/* define paragraph */
p {
  /* background: paleSpring */
  background: #dfdfbc;

  /* text color: darkGrey */
  color: #404040;

  /* border: darkRed */
  border: 0.0625em solid #dd0000;
}

Example HTML

<div>
<p>In contrast to previous websites, for example, we no longer need to code two different websites one for Internet Explorer and one for other browsers. Now one page that is suitable for all browsers is sufficient. The page is also suitable for printing or for displaying on a smartphone. Please note: one page is suitable for all browsers and all devices.</p>
</div>

Output of the HTML code

In contrast to previous websites, for example, we no longer need to code two different websites one for Internet Explorer and one for other browsers. Now one page that is suitable for all browsers is sufficient. The page is also suitable for printing or for displaying on a smartphone. Please note: one page is suitable for all browsers and all devices.

This background represents the screen and is not part of the sample code.