html5中margin指哪个边缘

上周 我说的是边缘。

在 HTML5 中。
边距是元素的外边缘。

具体功能是。
在元素周围创建空白。
控制其他元素之间的间距。

基本功能。
第一点。
定义外边缘。
margin 属性设置外边距。
刚刚出界了。
与相邻物品或容器边缘的透明分隔物。

不包括背景颜色。
背景图像也不包括在内。
只需指定外部空白范围即可。

例如边距：2 0px； 在所有边上创建 2 0 像素的边距。

第二点。
设置属性值的快捷方式。
边距可以包含从 1 到 4 的值。

单个值。
所有方向的边距都相同。
例如边距：1 0px； 上、下、左、右均为1 0像素。

2 个值。
第一个值会上升和下降。
第二个值是大约。
例如边距：1 0px5 px； 上下各 1 0 个像素，左右各 5 个像素。

3 个值。
关于第一个值。
第二个值是大约。
在第三个值下。
例如边距：1 0px5 px1 5 px； 向上 1 0 像素，左右 5 像素，向下 1 5 像素。

4 个值。
顺时针方向。
上、右、下、左。
例如边距：1 0px5 px1 5 px2 0px； 向上 1 0 像素，向右 5 像素，向下 1 5 像素，向左 2 0 像素。

第三点。
特殊行为和预防措施。

合并垂直边距。
相邻元素将在块级别合并。
取较大值。
行内元素和浮动元素不会合并。

支持负值。
可以设置负边距。
例如边距：-1 0px； 但要小心。
避免与布局混淆。

单位和继承。
该值可以是像素，m。
它也可以是百分比。
相对于原始项目的宽度。
它也可以是自动的。
浏览器会自动计算它。
也可以继承。
继承原始元素的边距。

第四点。
典型应用场景。

将元素水平居中。
通过margin:0auto;实现。
需要配合display:block； 并且固定宽度。

控制元素的间距。
避免将内容粘在边缘。
或者相邻的物品太近。

响应式布局。
使用百分比或自动。
适应不同的屏幕尺寸。

算了。

html中margin怎么用 css外边距margin的5种设置技巧

边距控制元素的间距。

1 .多值设置：1 ～4 个值，按上、右、下、左顺序。
值 1 ：所有方向相同。
2 个值：上、下/左、右。
3 个值：上/左/下。
4 个值：右上、左下。

2 应用负值：违反规则。

安装：顶部边距：-2 0px。

水平重叠：左边距：-1 0 px。
负值可能会令人困惑。

3 边距：自动：水平居中。
条件：显示：块+宽度。
.center-box{宽度: 5 0%;边距：0 自动；
4 避免边距重叠：
添加内边距或边框。

Flex/Grid 布局：父元素的显示：flex/grid。

5 百分比值：响应式布局。
保证金：5 %；父容器所有方向宽度的 5 %。

高级技能：CSS变量。
:root{--main-margin: 2 0px;}.card{margin: var(--main-margin);}
注释：
避免在线保证金。

浏览器兼容性：IE6 -7 需要特殊处理。

团队规范：统一命名规则。