This is the second day of my participation in Gwen Challenge

Reading time: 6min

Objective: To learn the basic theory of box model, understand the working principle of box model, understand the difference between box model and alternative model and how to switch.

Prerequisites: BASIC KNOWLEDGE of HTML and CSS.

In CSS, all elements are surrounded by “boxes”. Understanding the basic principle of these “boxes” is the key to achieving accurate layout and handling the arrangement of elements with CSS.

What is the CSS box model?

The full CSS box model applies to block-level boxes, and inline boxes use only part of the content defined in the box model. The model defines each part of the box — margin, border, padding, and content — that together create the content we see on the page.

Each part of the box model

To form a block-level box in CSS, you need:

  • Content boxThis area is used to display content, size can be setwidthandheight.
  • Padding boxAn empty area surrounding the content area; Size bypaddingSet related properties.
  • Border boxBorder boxes wrap content and inner margins. Size byborderSet related properties.
  • Margin boxThis is the outermost area, the empty space between the box and the other elements. Size bymarginSet related properties.

The diagram below:

Standard box model

In the standard model, if you set width and height for a box, you actually set the content box. The padding and border, together with the width and height set, determine the size of the box. See below.

Suppose we define width, height, margin, border, and padding:

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}
Copy the code

If you use standard model width = 410px (350 + 25 + 25 + 5 + 5), height = 210px (150 + 25 + 25 + 5 + 5), padding + border + Content box.

Note: Margin doesn’t count in the actual size — of course, it affects how much space the box takes up on the page, but it affects the space outside the box. The box ranges up to the border — it does not extend to margin.

Block-level boxes and inline boxes

We use two types of “boxes” extensively in CSS — block boxes and inline boxes. The two boxes behave differently in terms of page flow and relationships between elements:

Characteristics of block-level boxes

  • The box expands in an inline direction and takes up all the space available to the parent container in that direction, which in most cases means that the box is as wide as the parent container.
  • Each box will wrap.
  • width 和 heightAttributes can come into play.
  • Padding, margin, and border “push” other elements away from the current box.

Unless specified, headings (

, etc.) and paragraphs (

) are block-level boxes by default.

Features of inline boxes

  • Boxes do not generate line breaks.
  • width 和 heightAttributes will have no effect.
  • Vertical margins, margins, and borders are applied but do not place the rest ininlineStatus box pushed open.
  • Horizontal margins, margins, and borders will be applied and will put others ininlineStatus box pushed open.

The elements, , , and used as links are inline by default.

We control the external display type of the box by setting its display property, such as inline or block.

Added: Internal and external display types

It is good to explain the internal and external display types here as well. As mentioned above, CSS’s Box model has an external display type that determines whether the box is block-level or inline.

The box model also has an internal display type, which determines how the elements inside the box are laid out. By default, they are laid out as normal document flow, which means they are the same as other block elements and inline elements (as described above).

However, we can change the internal display type by using a Flex-like display property value. If you set display: flex, on an element the external display type is block, but the internal display type is changed to flex. All the immediate children of the box become Flex elements and are laid out according to the rules for elastic boxes.

Use browser development tools to investigate case box models

Your browser developer tools make it easier for you to understand the Box model. If you view an element in DevTools in Firefox, you can see the size of the element as well as its margins, padding, and borders. This is a great way to check the size of your elements and see if your box is the size you expect!

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Everybody is good! I am the author of programming Samadhi, yi Wang, my public account is “programming Samadhi”, welcome to pay attention to, I hope you can give me more advice!