CSS property explanation: padding

1. The relationship between padding and container size

　For block horizontal elements: ①The padding value goes crazy, which will definitely affect the size; ②width is not auto, padding Affects the size; ③width is auto or box-sizing is border-box, and the padding value does not go crazy 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 too large to exceed the parent container, it will affect scrollHeight.

2. Negative padding values ​​and percentage values

About padding negative values: padding does not support any form of negative values.

About the padding percentage value: The padding percentage is calculated relative to the width.

The padding percentage value of inline horizontal elements: ① is also calculated relative to the width; ② the default height and width details are different; ③ padding will break lines.

3. Built-in padding of label elements

ol/ul list: ol/li element has built-in padding-left, but the unit is px not em, such as chrome browser The bottom is 40px, so if the font size is small, the spacing will be large, and if the font size is large, the serial number will crawl out of the container. Little experience: When the text size is 12-14px, the padding-left value of 22-25px will be more appropriate.

Other elements: ① All browsers have built-in padding in input/textarea input boxes; ② All browsers have built-in padding in button buttons; ③ Some browsers have built-in padding in select drop-down, such as Firefox IE8+ can be set padding; ④ All browser radio/checkbox single check boxes have no built-in padding; ⑤ The padding of button button elements is the most difficult to control.

button form button padding:

Because of this, we are When making buttons, use the tag to simulate buttons

　

4. Padding and graphic drawing

　

##5. Padding and layout

Use percentage units to build a fixed proportion layout structure:

　

With margin equal height layout:

Two-column adaptive layout:

The above is the detailed content of CSS property explanation: padding. For more information, please follow other related articles on the PHP Chinese website!