Introduction to the concept of CSS box model

CSS Box Model specifies how element boxes handle element content, padding, borders and margins.

CSS Box Model Overview                                                                                            

## Overview of the CSS box model

                                                                                                                                   

## Overview of the CSS box model

The innermost part of is the actual content, and what directly surrounds the content is the padding. Padding presents the element's background. The edge of the padding is the border. Outside the border is the margin, which is transparent by default and therefore does not obscure any elements behind it.

Tip:

The background is applied to the area consisting of content, padding, and borders.

Padding, borders, and margins are all optional, and the default value is zero. However, many elements will have margins and padding set by user-agent style sheets. These browser styles can be overridden by setting the element's margin and padding to zero.

This can be done individually or for all elements using a universal selector:

* {
  margin: 0;
  padding: 0;
}

In CSS, width and height refer to the width of the content area and height. Increasing padding, borders, and margins will not affect the size of the content area, but it will increase the overall size of the element's box.

Assume that the box has 10 pixels of margin and 5 pixels of padding on each side. If you want this element box to reach 100 pixels, you need to set the width of the content to 70 pixels, please see the picture below:

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

Tips:

Padding, borders, and margins can be applied to all sides of an element or to individual sides.

Tips:

Margins can be negative values, and in many cases negative value margins must be used.

Although there are ways to solve this problem. But the best solution right now is to avoid the problem. That is, instead of adding padding with a specified width to an element, try adding padding or margins to the element's parent and child elements.

Term translation

element: element.

padding: Padding, there is also information that translates it into padding.

border: border.

margin: Margin, there is also information that translates it into blank or margin. ###

The above is the detailed content of Introduction to the concept of CSS box model. For more information, please follow other related articles on the PHP Chinese website!