CSS Basics: Discover the Wonders of Padding – A Comprehensive Guide to Level Up Your Skills

Deutsch

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 a shorthand property for the 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:

  1. The padding property is used to create space 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.

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

  3. For padding you can specify 1, 2, 3 or 4 values to define the inner space 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)

  4. The padding area always has the same background color as the content area.

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