Back-end Coders Talk About Front-end (CSS) Lesson 6: Box Model_html/css_WEB-ITnose

The innermost part of the element box 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 and padding and borders.

1. CSS padding attributes

属性	描述
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

Attribute value:

auto: The browser calculates the padding.

length: Specifies the padding value in specific units, such as pixels, centimeters, etc. The default value is 0px.

%: Specifies padding as a percentage of the width of the parent element.

inherit: Specifies that padding should be inherited from the parent element.

2. CSS border attributes

1. border

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。

2. border-style

属性	描述
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-bottom-style	设置元素的下边框的样式。
border-left-style	设置元素的左边框的样式。
border-right-style	设置元素的右边框的样式。
border-top-style	设置元素的上边框的样式。

Attribute value:

none: Define no border.

hidden: Same as "none". Except when applied to tables, for which hidden is used to resolve border conflicts.

dotted: Define dotted border. Renders as a solid line in most browsers.

dashed: Define dashed line. Renders as a solid line in most browsers.

solid: Define a solid line.

double: Define double lines. The width of the double line is equal to the value of border-width.

groove: Define the 3D groove border. The effect depends on the value of border-color.

ridge: Define the 3D ridge border. The effect depends on the value of border-color.

inset: Define the 3D inset border. The effect depends on the value of border-color.

outset: Define the 3D outset border. The effect depends on the value of border-color.

inherit: Specifies that the border style should be inherited from the parent element.

3. border-width

属性	描述
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-bottom-width	设置元素的下边框的宽度。
border-left-width	设置元素的左边框的宽度。
border-right-width	设置元素的右边框的宽度。
border-top-width	设置元素的上边框的宽度。

Attribute value:

thin: Define a thin border.

medium: Default. Define a medium border.

thick: Define a thick border.

length: Allows you to customize the width of the border.

inherit" specifies that the border width should be inherited from the parent element.

4. border-color

属性	描述
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom-color	设置元素的下边框的颜色。
border-left-color	设置元素的左边框的颜色。
border-right-color	设置元素的右边框的颜色。
border-top-color	设置元素的上边框的颜色。

color_name: Specifies that the color value is the border color of the color name (such as red).

hex_number: Specifies the border color whose color value is a hexadecimal value (such as #ff0000).

rgb_number: Specifies the border color whose color value is an rgb code (such as rgb(). 255,0,0)).

transparent: The border color is transparent.

inherit: Specifies that the border color should be inherited from the parent element.

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

Attribute value:

auto: The browser calculates the margins.

length: specified in specific units. The calculated margin value, such as pixels, centimeters, etc. The default value is 0px.

%: Specifies the margin based on the percentage of the parent element's width. 🎜>

inherit: Specifies that margins should be inherited from the parent element.

4. Margin merging:

Margin merging means that when two vertical margins meet, They will form a single margin whose height is equal to the greater of the heights of the two merged margins. >