Box Model, Box Model

Box Model, Box Model
Box Model Overview

The box model is one of the cornerstones of CSS. It specifies how elements are displayed and (to some extent) how they interact. Each element on the page is regarded as a rectangle frame, which consists of the content, inner margin, border, and outer margin of the element ,:

The padding, border, and outer margin are optional. The default value is 0, but many elements are set by the user proxy style sheet (Browser style, you can use the universal selector to explicitly set the padding and padding to 0 to overwrite the Browser style:

* {Margin: 0; padding: 0 ;}

The padding appears around the content area. If you add a background to an element, Beijing will apply to the area composed of content and padding. the padding is usually used to create an isolation band, so that the content will not be mixed with the background; the border will add a line to the outside of the internal margin. These lines can be of various styles, such as truthful lines and live dotted lines; the outer margin is the outer margin and the outer margin is transparent. It is usually used to control the interval between elements. Width and Height indicate the Width and Height of the content area. When margin or padding is set, the size of the entire element box is changed.

 

Overlay margin

Only common elements and non-floating elements are allowed.

1. when two or more vertical margins meet, the margins they form are not the sum of the bottom margins of the above elements and the top margins of the following elements, but the two margins have a larger value ,:

2. When the child element's top and bottom margins match the parent element's top and bottom margins, an extra margin with a large margin value will also be formed ,:

3. If the content of an element is empty, the upper and lower margins will also overlap ,: