MARGIN在发射端什么意思(Margin什么意思)

margin和padding

ps：如果想要深入了解css盒模型，可以去 w3cSchool 找到关于盒模型的详细概述，这里只会简单的介绍部分盒模型相关的知识

这是一个元素的盒模型展示，几乎所有元素都是使用这种盒模型构成的，盒模型分四个部分，从里到外分别为 element(元素) 、 padding(内边距) 、 border(边框) ， margin(外边距)

写在双闭合标签里面的内容通常会显示在元素的element部分，也就是内容区。

页面中的显示效果为：

如果我在div内部再加一个图片，则div的内容区域被继续撑开：

呈现效果为：

padding不会占据元素的内容区域，但是它会扩展一个元素的内部区域，可以打一个比方，我们每个人本身就好比是一个元素的element，而你身上穿的衣服就好比是元素的padding部分，你的衣服既是你又不是你本身，别人在找你的时候如果碰到你的衣服你可以感觉到是有人触碰了你，但是你的身体本身并不会延伸到衣服的内部

还是使用上面的那个div，我们现在给这个div加上一个padding，在这之前为了方便观察，我们先给这个div加上一个背景颜色和宽度，

现在呈现出来的效果：

我们可以看到，现在文字和图片还是在这个元素的底部的，我们现在给他加上一个50px的padding

其中蓝色部分是element，也就是元素的内容区，400 * 125代表了我们设置了400px的宽度，里面的图片高度是125px，内容区被撑开，所以此时元素的内容区是400 * 125像素的大小，然后往外看，padding有4个50，这是代表了这个元素在上下左右四个方向上的padding都是50像素，此时我们整个元素的占位宽度就是400+50+50=500px，高度则是125+50+50=225像素，所以但是由于元素内容的部分不能延伸到padding区域，所以上面的文字和图片还是都在元素本身的内容区，不会随着元素尺寸被padding撑大而向外扩展。

再回到这张图片

现在我们有一个a标签构成的超级链接，点击这个a标签可以跳转到对应的页面，但是有的时候在页面中文字可能比较小，如果只有在点击到文字上时才能跳转的话会影响用户体验，所以我们要让a标签的点击区域变大，有两种方式可以解决这个问题：

为了方便观察，我们同时给他一个背景色

这时，我们由于扩大了a标签的宽度和高度，所以整个绿色的区域都是a标签的范围，自然都可以实现点击效果。

上面那种方式可以实现大多数需求，但是现在还有一个问题，就是当a标签的可点击范围不固定时，或者由于种种问题我们不能给a标签转成块级元素时，上面那种方法就不生效，比如下面这种场景：

这是一个通常网页中常见的菜单栏，现在我有一个需求，就是需要给被点击超级链接加大尺寸方便点击，同时加一个统一的背景颜色，以便于让用户区分哪些是可以被点击的区域。

按照上面的那种方式，我们可以这样设置

呈现的效果是

这时如果我们想要给文字居中还需要设置两个样式：

然后出来的效果是这样的：

这时我们已经达到了我们所需要的效果，但是还有一种情况，就是当列表内的文字长短不一时，这种方式就会出现问题：

边框的使用没有什么好说的，只有几个主要注意的地方：

其中1、2比较容易理解，下面解释一下第3点。

我们在做页面的时候，有的时候会使用这样的特效：

这两种效果最大的区别在于2比1多了一个过渡的效果。

按照没有过渡效果的border（以下简称效果1）的思路，转变成有过渡效果的border（简称效果2）应该只需要加一个 transition 作过渡动画就可以了，但实际上如果我们只是在效果1的基础上加了一个 transition 的话则会出现这样的效果：

在初学css时，margin和padding最容易混淆，实际上我们只需要注意两者最大的区别就可以，那就是 padding 可以延伸 background 的属性，主要是 background-color 和 backgound-image ，而 margin 不会延伸这些属性。

我在这里写了两个div，给他们加了同样的宽度并分别加了背景颜色，同时给div1加了几个文字内容，由于块级元素的特性，他们分别处于两排。

现在我给div1设置50px的padding

可以看到，现在div1的元素本身被撑大了，现在div1的高应该是50 + 200 + 50 = 300px

同样，由于上面提到的padding的特性，所以文字依然是在内容区，没有进入padding的部分。

此时我们可以看到，div1的整体尺寸被放大了，同时背景颜色延伸到padding的范围。

现在我再给div1设置5px的border

这时div1的整体高度应该是5 + 50 + 200 + 50 + 5 = 310px

然后再设置20px的margin：

我们先不用管其他方向，先看下面，也就是div1和div2交接的地方。

在这里我们可以看到div1和div2之间有20px的间距，这一部分就是div1的margin，而且和padding最大的区别是这一部分没有延伸div1的背景色和内容区域，同时也没有让div的元素尺寸发生改变

因此我们可以这样理解

这里看完了，我们现在再回头看margin右侧的问题

我们可以发现，Chrome在审核元素时会自动将对应部位改变颜色，在右侧鼠标放在对应的位置时，左侧的元素也会实时响应出对应位置，如图所示，在element、padding、border时显示均正常，margin时上、左、下三个方向也没有问题，唯独右侧会比我设置的margin要大得多（ margin:20px ），这是因为块级元素独占一行的特性，让他在自己元素本身同行的位置会有默认的 margin:auto; ，即 同行下所有元素没有占的位置均为这个元素的margin ，这也是块级元素不能和其他元素同行的原因。

元素的盒模型会有各种各样特殊的问题，下面举几个常见的例子以及经常出现的问题和解决方式：

我们在布局时，由于元素的高度通常为后台提供，所以前端页面的部分通常不会给固定的高度以免结构混乱，所以我们在布局时需要灵活运用padding和清浮动。

上面一个div内部有一个ul无序列表，div上下均距离ul有一定的距离。

在我们写静态页面时无序列表的数量可能是固定的（4个），但是js加载时通常数量不固定，可能少于4个也有可能更多，这时如果我们给一个固定的高度则会出现内容溢出的问题

所以这里我们需要给div设置上下相等的padding，而不是固定高度。

在HTML中，一个元素内部的第一个子元素如果有margin-top的话即会将子元素的margin-top赋给父元素：

如图所示，我在元素中给h1设置了margin-top，但是h1的margin-top并没有生效，而是传递给了它的父元素div，导致div整个被拉了下来，布局错乱。

请教前端排版技巧，margin 和position的区别

margin是外边距，就好比你家的房子与周围其他房子之间的距离，也就是说margin是受周围其他元素影响的。

position则是定位，根据参数的不同会有不同的定位方式。position:relative 是相对定位，是以元素的当前位置来作为定位的参照物，比如left:10px; top:-5px，就是把元素往左挪10像素，往上挪5像素。position:absolute 则是绝对定位，是以整个文档窗口来作为定位的坐标系（原点在左上角），比如left:200px; top:100px，就是把元素移到距离窗口左边200像素，上边100像素的位置。定位是不受周围其他元素影响的。

谁能告诉我margin和padding的用法以及区别

margin\padding在网页中是css样式

代码如下?a{margin:5px;padding:5px}

其实是有上下左右4个参数的,上边的写法是简写,实际上等价于

a{margin:5px?5px?5px?5px;padding:5px?5px?5px?5px;}

先解释下4个数字代表什么,?代表距离上、右、下、左的距离

margin?是标签距离周围标签的距离

padding?是标间内容和边框间的距离

图中红色表示元素，2个灰色框表示padding和margin

margin在web前端里是什么意思

margin和padding是在html中的盒模型的基础上出现的，margin是盒子的外边距，即盒子与盒子之间的距离，而pdding是内边距，是盒子的边与盒子内部元素的距离。

请问，margin穿透是为什么

2个盒子，当上面的盒子设置margin-bottom:50px

而下面的盒子设置了margin-top:80px

2个盒子之间的距离本来应该130px；然后并没有，浏览器会按照最外边的那一条边。80px

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值是有效的。