Relationship between the padding, border, and margin in Css

CSS Box Model

The inmost part of the element box is the actual content, and the content is directly surrounded by the padding. The padding shows the background of the element. The edge of the padding is the border. The outer border is the outer margin, and the outer margin is transparent by default, so it does not block any subsequent elements.

The padding, border, and margin are optional. The default value is zero. However, many elements are configured with the outer and inner margins by the user proxy style sheet. You can overwrite these browser styles by setting the margin and padding values to zero. This can be done separately, or you can use the universal selector to set all elements:

Reference content is as follows: *{ Margin: 0; Padding: 0; }

In CSS, width and height indicate the width and height of the content area. Adding the padding, border, and margin does not affect the size of the content area, but increases the size of the element box.

Assume that each side of the box has a margin of 10 pixels and a margin of 5 pixels. If you want the element box to reach 100 pixels, you need to set the content width to 70 pixels. See:

Reference content is as follows: # Box { Width: 70px; Margin: 10px; Padding: 5px; }

Tip: the padding, border, and outer margin can be applied to all edges of an element or individual edges.

Tip: the outer margin can be a negative value. In many cases, the outer margin of a negative value must be used.

Browser compatibility

Once an appropriate DTD is set for the page, most browsers will render the content as shown in the figure above. However, the presentation of IE 5 and 6 is incorrect. According to W3C standards, the space occupied by element content is set by the width attribute, and the padding and border values around the content are calculated separately. Unfortunately, IE5.X and 6 use their own non-standard models in the weird mode. The width attribute of these browsers is not the width of the content, but the sum of the width of the content, padding, and border.

Although there is a way to solve this problem. However, the best solution is to avoid this problem. That is, do not add the padding with the specified width to the element, but try to add the padding or padding to the parent and child elements of the element.

Term Translation

Element: element.

Padding: padding, which can be translated as padding.

Border: border.

Margin: margin, which can also be translated into blank or blank edges.

Padding and margin are collectively referred to as the inner and outer margins. The blank inside the border is the padding, and the blank outside the border is the padding.