摘要：Share interest, spread happiness, increase knowledge, and leave beautiful.
分享兴趣，传播快乐，增长见闻，留下美好！
亲爱的您，这里是LearningYard新学苑。
今天小编为大家带来
“学越千山：CSS技巧——为HTML元素添加样式及单位”
欢迎您的访问。
Share interest, spread happiness, increase knowledge, and leave beautiful.
Dear, this is the LearingYard Academy!
Today, the editor brings the
Learning over a thousand mountains：CSS Techniques—Styling HTML Elements and Units，
Welcome to visit!
思维导图
Mind mapping
为HTML元素添加样式，可以通过CSS来调整元素的边距（内边距和外边距）、边框等属性。
To style HTML elements, CSS can be used to adjust properties such as margins (padding and margin), borders, and more.
内边距（Padding)
内边距是元素内容与其边框之间的空间。可以通过以下属性来设置：
Padding refers to the space between an element's content and its border. It can be set using the following properties:
单侧内边距
padding-top：设置元素顶部的内边距。
padding-right：设置元素右侧的内边距。
padding-bottom：设置元素底部的内边距。
padding-left：设置元素左侧的内边距。
Single-side padding
padding-top: Sets padding for the top of the element.
padding-right: Sets padding for the right side of the element.
padding-bottom: Sets padding for the bottom of the element.
padding-left: Sets padding for the left side of the element.
顺时针简写：
Shorthand (clockwise order):
可以按照上、右、下、左的顺时针顺序，使用简写属性padding来同时设置四个方向的内边距。
You can use the shorthand property padding to set padding for all four sides simultaneously, following the clockwise order of top, right, bottom, left.
padding: 10px 20px 10px 20px;
这表示元素顶部的内边距为10px，右侧为20px，底部为10px，左侧为20px。
This sets 10px padding for the top, 20px for the right, 10px for the bottom, and 20px for the left.
外边距（Margin）
外边距是元素边框与外部元素之间的空间。可以通过以下属性来设置：
Margin refers to the space between an element's border and external elements. It can be set using the following properties:
单侧外边距
margin-top：设置元素顶部的外边距。
margin-right：设置元素右侧的外边距。
margin-bottom：设置元素底部的外边距。
margin-left：设置元素左侧的外边距。
Single-side margin
margin-top: Sets margin for the top of the element.
margin-right: Sets margin for the right side of the element.
margin-bottom: Sets margin for the bottom of the element.
margin-left: Sets margin for the left side of the element.
负外边距（Negative margins）：
外边距的值可以为负数，这会使元素向相反方向移动，从而可能占用更多的空间。
Margin values can be negative, causing elements to shift in the opposite direction and potentially occupy more space.
margin-left: -10px;
Shorthand (clockwise order)：
与内边距类似，可以按照上、右、下、左的顺时针顺序，使用简写属性margin来同时设置四个方向的外边距。
Similar to padding, the shorthand property margin can be used to set margins for all four sides in clockwise order.
margin: 10px 20px 10px 20px;
边框是围绕元素内容和内边距的线条。可以通过以下属性来设置：
A border is a line surrounding an element's content and padding. It can be configured using these properties:
属性
border-width：设置边框的宽度。
border-style：设置边框的样式，如solid（实线）、dotted（点线）、dashed（虚线）等。
border-color：设置边框的颜色。
Properties
border-width: Sets the border's thickness.
border-style: Defines the border style (e.g., solid for solid lines, dotted for dot patterns, dashed for dashed lines).
border-color: Sets the border's color.
简写属性：
Shorthand property:
可以使用简写属性border来同时设置边框的宽度、样式和颜色。
The border shorthand property allows simultaneous setting of width, style, and color.
border: 1px solid black;
这表示元素有一个1px宽的黑色实线边框。
This creates a 1px-wide solid black border.
单位(Units)
在CSS中，可以使用各种单位来指定长度值。常见的单位包括：
CSS supports various units for specifying length values. Common units include:
绝对单位
in：英寸。
mm：毫米。
这些单位基于物理测量，适用于需要精确控制尺寸的情况。
Absolute units
in: Inches.
mm: Millimeters.
These physical measurement-based units are suitable for precise dimension control.
相对单位
em：相对于父元素的字体大小。
rem：相对于根元素（即元素）的字体大小。
这些单位有助于创建响应式设计，因为它们可以根据用户的浏览器设置或设备尺寸进行调整。
Relative units
em: Relative to the parent element's font size.
rem: Relative to the root element's (i.e., ) font size.
These units facilitate responsive design by adapting to user browser settings or device dimensions.
今天的分享就到这里了，
如果您对文章有独特的想法，
欢迎给我们留言。
让我们相约明天，
祝您今天过得开心快乐！
That's all for today's sharing.
If you have a unique idea about the article,
please leave us a message,
and let us meet tomorrow.
I wish you a nice day!
翻译：百度翻译
参考资料：百度百科，CSDN
本文由LearningYard新学苑整理并发出，如有侵权请后台留言沟通。
来源：乱侃