css margin外边距属性与用法总结

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em、百分数值甚至负值。下面本文就来具体的谈谈外边距 margin 属性和使用，外边距的重叠和叠加，以及 margin 为负值的作用等内容。

一、CSS的margin属性介绍

1.详解CSS的margin属性使用

立即学习“前端免费学习笔记（深入）”；

margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。

2. 详解css的外边距margin的使用

立即学习“前端免费学习笔记（深入）”；

检索或设置对象四边的外延边距。如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上、下，第二个用于左、右。如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。外延边距始终透明。

3. CSS重要属性之 margin 属性知识大合集介绍

1）margin 属性的简单介绍

2）margin 无法适用的元素

3）外边距折叠 (Collapsing margins)

4）Collapsing margins 解决方法

二、margin 外边距重叠或者叠加问题

1. CSS中margin边界叠加问题的解决方法介绍（图文）

边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

2. CSS外边距(margin)重叠及防止方法

　边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

　两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。

三、margin 为负值的作用

1. 简单谈谈margin负值的作用

我们在CSS中都会使用margin，但将margin设置成负数，那可能就不大好处理了，margin负值并非hack，margin负值遵循文档流；假如使用margin负值促使一个元素向上位移，那么相关元素也会随之发生位移；margin负值能良好兼容各浏览器。

2. CSS中使用负margin值来调整居中位置

这或许是最常用的居中方法。如果知道了各个元素的大小，设置等于宽高一半大小的负margin值（如果没有使用box-sizing: border-box样式，还需要加上padding值），再配合top: 50%; left: 50%;样式就会使块元素居中。

有关CSSmargin的相关问答

1. 前端 - margin的问题，那个老哥帮我解释下

2. 前端 - CSS 三列等高布局的疑问 margin负补偿

3. css - margin 负值为什么要这样设计?

【相关推荐】

1. 详解css的外边距margin的使用0

2. 详解css的外边距margin的使用1

3. 详解css的外边距margin的使用2

以上就是css margin外边距属性与用法总结的详细内容，更多请关注php中文网其它相关文章！