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. >
Statement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn