Box model and element display mode

Box model

When css processes a web page, it thinks that every element is contained in an invisible box, which is the box model. The box consists of a content area, padding, border and margin. Insert picture description here

Padding

The inner margin of the element is between the border and the content area. The attribute that controls this area is the padding attribute. The padding property accepts a length value or a percentage value (based on the percentage of the width of the parent element), but negative values are not allowed.

padding-top: Set the top padding of the element.
padding-right: Set the right padding of the element.
padding-bottom: Set the bottom padding of the element.
padding-left: Set the left padding of the element.
padding: shorthand attribute. The function is to set all the padding attributes of the element in one declaration . Accept 1~4 attribute values, the meaning of accepting different numbers of attribute values is as the following code example.

padding:10px;
/*4个内边距均为10px*/
padding:10px 5px;
/*上内边距和下内边距为10px，右内边距和左内边距为5px*/
padding:10px 5px 15px;
/*上内边距为10px，右内边距和左内边距为5px，下内边距为15px*/
padding:10px 5px 15px 20px;
/*上内边距是10px,右内边距是5px，下内边距是15px，下内边距是20px*/

That is, you can use value copy . CSS defines some rules:

If the value of the left padding is missing, the value of the right padding is used.
If the value of the bottom padding is missing, the value of the top padding is used.
If the value of the right padding is missing, the value of the top padding is used.

When the values of the left and right padding are different, 4 attribute values are used regardless of whether the top and bottom are the same.

Border

The border of an element is one or more lines that surround the content and inner margins of the element. The border property of css is used to specify the style, width and color of the border .

border-style : Set the style of the border ( required attribute, there is no border without a border style ). 10 different non-inherit styles are defined, including none. Among them, dotted, dashed, solid, etc. are commonly used. Property value can be copied using value
border-top (right, bottom, left)-style: Set the border style of a certain side.
border-width : Specify the width of the border . There are two ways to specify the width of the border, you can specify the length value, such as 2px or 0.1em; or use one of the three keywords, they are thin, medium (default) and thick. The attribute value can be copied using the value .
border-top (right, bottom, left)-width: Set the width of a border on a certain side.
border-color : Set the color of the border . Its value has the form of color_name, hex_number, rgb_number, transparent, inherit, etc. The attribute value can be copied using the value.
border-top (right, bottom, left)-color: Set the color of the border on a certain side.
border-top (right, bottom, left) : shorthand property, used to set all the properties of the top (right, bottom, left ) border to the same declaration. You can set the border-style, border-width, and border-color values at the same time in the same declaration. It is also possible not to set one of the values. For example, border-left: solid #f0a;
border: Shorthand attribute, used to set the attributes for the four sides in a statement .

Since the default value of border-style is none, if no style is declared, it is equivalent to border-style: none. Therefore, a border style must be declared for a border to appear.

p{
    
    
    border-style:none;
    border-width:50px;
}
/*尽管边框的宽度是50px，但是边框样式设置为 none。在这种情况下，不仅
边框的样式没有了，其宽度也会变为0。这是因为如果边框样式为 none，即边
框根本不存在，那么就不可能有边框宽度，因此边框宽度自动设置为 0，而不
论你原先定义的是什么。*/

Margin

Margins are borders and the invisible area outside the borders that separate elements from adjacent elements. The easiest way to set the margin is to use the margin property, which accepts any length unit, percentage value or even negative value.

margin-top: Set the top margin of the element.
margin-right: Set the right margin of the element.
margin-bottom: Set the bottom margin of the element.
margin-left: Set the left margin of the element.
margin: A shorthand attribute of the element's margin, which can be copied by value.

It can be seen that abbreviated properties involving a single style (excluding border) can be copied by value; for example: padding, margin, border-style, border-width, border-color .

Margin merge problem

Margin merging means that when two vertical margins meet, they will form a single margin.

When an element appears on top of another element, the bottom margin of the first element will merge with the top margin of the second element. as the picture shows:
When an element is contained in another element (assuming there is no inner margin or border separating the outer margins), their top or bottom margins will also merge. as the picture shows:

In the first merge situation, the larger value of the margin will be used instead of the sum of the two values.

The second case can be:

Add a border to the parent element

Add top padding to the parent element

Add the overflow: hidden attribute on the parent element

Element display mode

Each element is either displayed in a separate line (such as div, p, h1~h6, etc.) or displayed in a line (such as em, span, a, etc.) by default. The display mode of an element refers to how the element is displayed . An element that occupies a row is called a block-level element, and an element that is displayed in the same row of adjacent elements is called an inline element. There are also several special tags in inline elements <img />, <input />, <td>, they have the characteristics of block elements and inline elements at the same time, called inline block elements.

The characteristics of block-level elements: one line alone, height, width, inner and outer margins can be set. If the height is not set, it will be supported by the content of the element, and the width is the width of the parent element by default.
Features of in-line elements: adjacent in-line elements are displayed on the same line, and the width and height settings are invalid (supported by the content).
Characteristics of inline block elements: multiple inline block elements can be accommodated in a row. Height, width, inner and outer margins can all be set. The width and height are supported by the content by default.

display attribute, display attribute is used to change the display mode of the element . The display modes corresponding to different attribute values are as follows:

value	description
none	This element will not be displayed.
block	This element will be displayed as a block-level element with line breaks before and after the element.
inline	By default, this element will be displayed as an inline element with no line break before and after the element.
inline-block	Inline block element.
list-item	This element will be displayed as a list.

Note : For inline elements, you cannot directly set attributes such as height, width, inner margin, and outer margin. The display mode of the element must be converted into a block element or an inline block element before setting, otherwise it will be invalid or a problem will occur.

Dust/2020/12/19