Padding
Padding refers to the distance between the content area and the border of the box. Whether it is padding or margin, there are four values: top, bottom, left, and right, corresponding to four sub-properties:
-padding-top top padding -padding-right right padding
-padding-bottom bottom padding -padding-left left padding
The inner margin will affect the size of the visible frame of the box, and the background of the element will extend to the inner margin, which means that the color of the inner margin will change with the background color. The size of the box will be determined by the content area, padding, and border. Using padding can set the width of the four paddings at the same time.
Set four different paddings at the same time: top right bottom left;
Set four same padding at the same time: 20px; (write only one value)
Margin
The outer margin refers to the distance between the current box and other boxes. It does not affect the size of the visible frame, but affects the position of the box. Like the inner margin, the outer margin also has four corresponding outer margin attributes.
-margin-top top margin -margin-right right margin
-margin-bottom bottom margin -margin-left left margin
Since the elements on the page are placed from the left to the top, when the left and top margins are set, its own position will be changed, and when the right and bottom margins are set, the positions of other elements will be changed. The margin can also specify a negative value. If the margin is set to a negative value, the element will move in the opposite direction.
margin can also be set to auto, and auto is generally only set to the margin in the horizontal direction. If it is only set, the margin of the left or right margin is auto, and the margin will be set to the maximum value. If the vertical direction is set to auto, the default The value is 0, usually set the value of margin to 0 auto, so that the element is centered horizontally. Margins can also use the shorthand attribute margin, which can set the margins of four sides at the same time, and the rules are the same as padding.
Overlapping margin styles
Adjacent margins in the vertical direction will overlap in the web page. The so-called overlap of margins is the maximum value of the adjacent margins between sibling elements instead of the sum of the margins of the two elements. If the margins of the parent and child elements are adjacent, the margins of the child elements will be set to the parent element. There are two solutions. 1. Make adjacent elements non-adjacent. You can add attributes between the two elements to separate them. 2. You can add inner margins to the parent element, but add inner margins to the parent element Padding increases the overall size of the parent element.
browser default style
When we write a web page, if we don’t add margins to the elements, we will find that there will be a distance between each element. In order for the browser to make the page have a better display effect when the page has no style, Therefore, default padding and margin are set for many elements. We don’t need to use these default styles under normal circumstances, so we often remove the default padding and margin before writing the style. We can use the "*" global selector to clear the browser's default style: margin: 0; padding: 0;