The padding property is a shorthand property for specifying the amount of space between the content of an element and the elemenf s border. It is the space that surrounds the content. It is non-inherited and has the initial value of 0. It takes one to four space-separated values, which can be in length values (e.g., px and em) or percentage values. If percentage is used, then padding is a percentage of the width of the parent element. For example, if it is directly in a browser window, then it is a percentage of the window’s width, and if it is in another box, then it is a percentage of the width of the box. How values are assigned is explained in Table 10.12.
The longhand properties for specifying different padding values for each edge of a box are padding-top, padding-right, padding-bottom, and padding- left, all of which are also non-inherited. Figures 10.51 and 10.52 show how the shorthand property is used and depict its effects.
Notice how the bottom box is bigger than the top one, even though they are set to the same width. This, as mentioned earlier, is because padding value is automatically added to the width and height of a box. Also, note that you can achieve the same padding as shown with the declaration padding: 12px 12px 12px 12px .
1. Specifying Padding for Logical Edges
The properties used to specify padding for the logical edges of an element are padding- block-end, padding-block-end, padding-block-end, and padding- block-end. Whether each targets the top, bottom, left, or right edge of an element depends on the value of the writing-mode property (discussed in Chapter 14).
The properties are non-inherited and take the same values as the padding-top, padding-right, padding-bottom, or padding-left property. Figure 10.53 shows the usage of the properties and produces the same result as shown earlier in Figure 10.38. Given the writing mode, padding-block- start specifies left edge, padding-block-end specifies right edge, padding- inline-start specifies top edge, and padding-inline-end specifies bottom edge.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.