Shulou(Shulou.com)06/01 Report--

This article will explain in detail the example analysis of the element content, inner margin, border and outer margin in CSS. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Overview of CSS Box Model

The CSS frame model (Box Model) specifies how element boxes handle element content, inner margins, borders, and outer margins.

The innermost part of the element box is the actual content, and the inner margin directly surrounds the content. The inner margin presents the background of the element.

The edge of the inner margin is the border. Outside the border is the outer margin, which is transparent by default, so it does not obscure other elements.

Tip: the background is applied to the area composed of content, inner margins and borders.

The inner margin, border, and outer margin are optional, and the default value is zero.

However, many elements will have the outer and inner margins set by the user agent style sheet.

You can override these browser styles by setting the element's margin and padding to zero.

This can be done individually, or all elements can be set using a common selector:

* {margin: 0; padding: 0;}

Width and height of the CSS box model

In CSS, width and height refer to the width and height of the content area.

Increasing the inner, border, and outer margins does not affect the size of the content area, but increases the overall size of the element box.

Assume that each side of the box has an outer margin of 10 pixels and an inner margin of 5 pixels.

If you want this element box to reach 100 pixels, you need to set the width of the content to 70 pixels:

# box {width: 70px; margin: 10px; padding: 5px;}

Tip: inner, border, and outer margins can be applied to all edges of an element, or to individual edges.

Tip: the outer margin can be negative, and a negative outer margin should be used in many cases.

Browser compatibility

Once the appropriate DTD is set for the page, most browsers will render the content according to the standard model described above. However, the presentation of IE 5 and 6 is incorrect. According to the W3C specification, the space occupied by the element content is set by the width attribute, while the padding and border values around the content are calculated separately. Unfortunately, IE5.X and 6 use their own non-standard models in weird patterns. The width property of these browsers is not the width of the content, but the sum of the width of the content, the inner margin, and the border. Although there is a way to solve this problem. But the best solution now is to avoid the problem. That is, instead of adding an inner margin with a specified width to an element, try to add an inner or outer margin to the parent and child elements of the element.

Translation of CSS frame model terms

Element: element.

Padding: inner margin, which is also translated as padding.

Border: border.

Margin: outer margin, there are also materials to translate it into blank space or blank margin.

Tip: the inner margin and the outer margin, the space inside the border is the inner margin, and the space outside the border is the outer margin.

This is the end of this article on "sample analysis of element content, inner margin, border and outer margin in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.