margin的其他值

上下margin的传递

margin-top传递

如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素

margin-bottom传递
如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素

如何防止出现传递问题
给父元素设置padding-top\padding-bottom;
给父元素设置border;
触发BFC: 设置overflow为auto;

建议

margin一般是用来设置兄弟元素之间的间距
padding一般是用来设置父子元素之间的间距

上下margin的折叠

垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）

水平方向上的margin（margin-left、margin-right）永远不会collapse

折叠后最终值的计算规则

两个值进行比较，取较大的值;

如何防止margin collapse ?

只设置其中一个元素的margin;

两个兄弟块级元素之间上下margin的折叠

父子块级元素之间margin的折叠

外边距 - margin相关推荐

css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
CSS外边距(margin)重叠及防止方法
#css外边距margin重叠及防止方法CSS外边距(margin)重叠及防止方法 #1-什么是外边距margin重叠1. 什么是外边距(margin)重叠外边距重叠是指两个或多个盒子(可能相邻也可 ...
盒子模型之外边距margin(HTML、CSS)
盒子模型之外边距margin(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta ...
css margin为什么重叠,CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
html改变元素外边距,CSS 简明教程 - 外边距 ( margin ) 属性
CSS margin 属性用于在 HTML 元素周围创建「空白」,这些空白在元素的边框之外创建我们可以单独设置元素的上边距,下边距,左边距和右边距,也可以使用 margin 属性同时设置所有边 ...
CSS外边距margin
CSS外边距margin CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin 可 ...
外边距(margin)
外边距(margin) margin属性用于设置外边距.设置外边距会在元素之间创建"空白",这段空白通常不能放置其他内容. margin-top: 上外边距 margin-righ ...
4、CSS 外边距margin
围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的"空白". 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CS ...
css之去除html标签默认的外边距margin和内边距padding,通用工具类 base.css
@charset "utf-8";/*!* @名称:base.css* @功能:1.重设浏览器默认样式* 2.设置通用原子类*/ /*防止用户自定义背景颜色对网页的影响,添加让用户 ...

外边距 - margin

margin的其他值

上下margin的传递

上下margin的折叠

外边距 - margin相关推荐

最新文章

热门文章