CSS in-depth understanding of the padding of learning notes

1. The relationship between padding and container size

　　For block horizontal elements: ①padding value of the burst, will affect the size, ②width non-auto,padding impact size, ③width to Auto or box-sizing for Border-box, while the padding value does not go away, does not affect the size.

For inline horizontal elements: The horizontal padding affects the dimensions, and the vertical padding does not affect the dimensions, but affects the background color. When the vertical padding is large beyond the parent container, the scrollheight is affected.

2, padding negative and percent values

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

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

Padding percent value of the inline horizontal element: ① is also calculated relative to the width, ② the default height-width details are different; ③padding will break.

3, the tag element of the built-in padding

Ol/ul list: ol/li element built-in Padding-left, but the unit is PX is not em, such as the Chrome browser is 40px, so the font size is very small spacing will be very large, the font size is large serial number will crawl out of the container. Small Experience: When the text size is 12-14px, the Padding-left value 22-25px will be more appropriate.

Other elements: ① all browsers input/textarea input box built-in Padding;② all browser button buttons built-in Padding;③ partial browser Select drop-down built-in padding, such as Firfox ie8+ can be set padding ④ All browsers radio/checkbox single check box no built-in Padding;⑤button button elements are padding most difficult to control.

button form buttons padding:

　　

　　

　　Because of this, we use the <a> tag to simulate the button when we make the button.

　　

4, padding and graphic drawing

　　

5. Padding and layout

Build a fixed scale layout structure using percent units:

　　

With the high layout of margin:

　　

Two-column Adaptive layout:

　　　

CSS in-depth understanding of the padding of learning notes