css代码margin什么意思,css中的margin属性

margin在html中什么意思

margin 是 CSS 语法，这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

“margin”的语法结构：

（1）margin:5px auto　意思上下为5,左右平均居中

（2）margin-top: 20px　上外边距

（3）margin-right: 30px　右外边距

（4）margin-bottom: 30px　下外边距

（5）margin-left: 20px　左外边距

（6）margin:1px　四边统一边距

（7）margin:1px 1px　上下边距，左右边距

（8）margin:1px 1px 1px　上，左右，下边距

（9）margin:1px 1px 1px 1px　上，右，下，左边距

注释：允许使用负值。

以上内容参考：百度百科-margin

CSS属性margin是什么意思？

margin:10px

20px

30px

40px;

4个值是

是指上

右

下

左

4个方向的距离

margin:0

auto；

2个值是

是指

（上下）

（左右)

一起控制

那么

margin:0

auto；的意思

就是

上下距离是0

左右距离自动

也就是说

是居中的意思！~

CSS中margin和padding的区别

margin和padding都表示边距的，margin是指的外边距属性,padding是指的内边距。这是盒子模型的概念。

盒子模型示意：

代码示例：

结果如下：

CSS理解之margin

margin重叠通常特性：

margin重叠三种情况：

demo 1:

1.相邻兄弟元素margin重叠

兄弟元素的上下margin发生了重叠

2.父级和第一个/最后一个子元素

demo 1:

inline元素（内联元素，像图片、文字这样的东西）

块状格式化上下文元素（BFC元素）

同样可以利用父子margin重叠条件来去除margin重叠：

demo 2：

demo 2 :

demo 2:

去掉margin-bottom重叠与上面类似。

3.空的block元素margin重叠：

空的block元素发生margin重叠，也需要一些条件限制：

去掉空的block元素的margin重叠也是利用上面的条件：

3.margin重叠的计算规则：

1、正正取大值：

2、正负值相加：

3、负负最负值（取绝对值大的）：

首先理解margin atuo的作用机制 ，先看一些事实例子：

1.元素有时候，就算没有设置width或height，也会自动填充外部容器

例1:

例2：

以上两个例子是比较常见的，没有设置宽高也会自动填充所在容器。

若刚才的两个例子，如果设置了width或heigth，自动填充特性就会被覆盖。

总之一句话，auto就是用来分配。

通过以上的例子，很多事情就很好理解了，比方说：

1.为什么图片设置了 margin：0 auto 不水平居中？

如上图，设置了 margin auto ，图片为什么还是不居中呢？

因为图片是inline水平的，它占据的空间并没有撑满整个容器，如果没有设置宽度值。所以它就不满足 margin auto 用来填充剩余空间的条件，因为他根本就没有剩余空间。要想让它居中也很简单：

2.为什么明明容器定高，子元素也定高了， margin auto 0 无法垂直居中?

上图水平方向剧中了，但是垂直方向不剧中，父级元素高度有了，子元素高度也有了，为什么还是不垂直居中呢？

因为他不满足占满整个容器这个条件，想一下，如果，没有为.son设置高度值，它之前满足占满整个容器这个条件吗？很显然不满足，也就没有剩余空间，所以设置 height:100px margin auto 不会垂直居中。

还需要注意一点：用 margin:auto 来实现居中，它计算后的值必须是正直，比如说你的父容器宽度1000px，子元素宽度2000px，这时设置 margin：auto 它是不居中的。

那么如何实现垂直方向上的剧中呢，方法很多不止一种：

1.writing-mode与垂直居中：

更改流为垂直居中之后，内容会自动撑满垂直方向的高度。这时宽度不会自动撑满容器，所以宽度的水平居中就失效了。

2.绝对定位元素实现垂直居中：

子元素设置了 top:0;right:0;bottom:0;left:0; 之后，没有设置宽高，absolute元素也自动填满了容器。

1.margin负值下的两端对齐（主要利用了margin可以改变元素尺寸这一特性：正直变小，负值变大）

由于 div class="ul"/div 没有设置宽度，所以设置了 margin-right:-20px; 后，改变了它的宽度，增大了20px，变为1220px。这时我们再把 li 的宽度设置为计算好的386.66666px，就可以实现没有间隙的两端对齐。 主要利用了margin负值增加它的空间 。

demo：

可以看出它的垂直方向是没有margin的，是无效的。

2.第二种常见的无效是margin重叠，比如你设置了margin-top当发现没有效果，这就是margin重叠带来的影响。

3.display:table-cell与margin

demo:

可以看出设置的margin是无效的。

但是对替换元素设置table-cell是可以发生作用的，但平时我们不会给替换元素设置table-cell，这是没有任何意义的，所以记住这点就行。

4.position：absolute与margin，绝对定位元素非定位方向的margin值 “无效” ，定位方向的margin值是有效的。

在CSS中 { margin:0 196px 0 330px;}是什么意思？

margin表示外边距；

问题上的那段代码可解释为：上边距0px、右边距196px、下边距0px、左边距330px。这样使用margin的参数顺序是顺时针。

另外padding代表内边距，它的使用方法与margin类似。

呵呵，祝你好运！

CSS里的padding、margin分别是啥意思？

Padding（填充）属性定义元素边框与元素内容之间的空间。

Padding属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。单独使用填充属性是在一个声明中设置元素的所内边距属性。缩写填充属性也可以使用，一旦改变一个数值，则padding对应的距离都会改变。

扩展资料：

可能的值：

auto：浏览器计算外边距。

length：规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。

%：规定基于父元素的宽度的百分比的外边距。

inherit：规定应该从父元素继承外边距。

内外距离区别：

margin与padding如何进行区分，这是很多学html人的困扰，其实说白了padding 就是内容与边框的空隙。而margin则是模块与模块的空隙。

参考资料来源：百度百科-padding