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