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

This article introduces the relevant knowledge of "what is the concept of CSS box model". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

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

Overview of CSS Box Model

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 any elements behind it.

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;}

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 the element box to reach 100 pixels, you need to set the width of the content to 70 pixels, as shown in the following figure:

# 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.

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.

Terminology translation

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.

This is the end of the content of "what is the concept of the CSS box model". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.