CSS deep understanding of Study Notes padding and csspadding

CSS deep understanding of Study Notes padding and csspadding

1. Relationship between padding and container size

　　For horizontal block elements: ① When the padding value is exposed, the size will be affected; ② If width is not auto, padding affects the size; ③ if width is auto or box-sizing is border-box, at the same time, the padding value does not overhead and does not affect the size.

For inline horizontal elements: horizontal padding affects the size. Vertical padding does not affect the size, but affects the background color. When the vertical padding is greater than the parent container, scrollHeight is affected.

2. Negative padding values and percentage values

Negative padding values: padding does not support any negative values.

Padding percentage value: the percentage of padding is calculated relative to the width.

The percentage of padding of the inline horizontal element is calculated as follows: ① the same is calculated relative to the width; ② the default width and height details are different; ③ the padding will be broken.

3. Embedded padding of tag Elements

Ol/ul list: the ol/li element has built-in padding-left, but the unit is px rather than em. For example, if it is 40px In the chrome browser, the font size is very small and the spacing is very large, if the font size is large, the serial number will be crawled out of the container.Small experience: when the text size is 12-14px, the value of padding-left is 22-25px.

Other elements: ① embedded padding in the input/textarea input boxes of all browsers; ② embedded padding in button buttons of all browsers; ③ embedded padding in select drop-down of Some browsers, such as Firfox IE8 +; ④ there is no built-in padding for the single check boxes of radio/checkbox in all browsers; ⑤ it is difficult to control the padding of button elements.

Button form button padding:

　　

　　

　　Because of this, we use the <a> label to simulate the button when making the button.

　　

4. padding and drawing

　　

5. padding and Layout

Use percentage units to construct a fixed proportion layout structure:

　　

Works with margin and other high la s:

　　

Adaptive Layout in two columns: