1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

margin 属性用以设置元素的内边距,有以下取值:

  • 长度
  • 百分比:针对父元素宽度的百分比。
  • auto:让浏览器决定一个合适的外边距,通常用于居中。

$$warning

对于行内元素,上下外边距不起效。

$$

$$tip

paddingmargin 的区别:

  • padding 填充了元素的内容区域,可以增大背景色的范围,也可触发事件。
  • margin 用来控制元素之间的距离。

$$

当设置值的数量不同时,应用的效果也不同:

/* 设置所有边距 */
margin: 10px;
/* 设置上下边距为 10px,左右边距为 20px */
margin: 10px 20px;
/* 设置上边距为 10px,左右边距为 20px,下边距为 30px (不推荐)*/
margin: 10px 20px 30px;
/* 设置上边距为 10px,右边距为 20px, 下边距为 30px,左边距为 40px */
margin: 10px 20px 30px 40px;

也可以单个边距设置值:

/* 设置上边距 */
margin-top: 10px;
/* 设置下边距 */
margin-bottom: 10px;
/* 设置左边距 */
margin-left: 10px;
/* 设置右边距 */
margin-right: 10px;

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/GROwqEE?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

水平居中

通过设置块级元素的左右外边距为 auto 可以让其在父元素中居中。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/PoOBrJy?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

外边距合并

  • 当存在兄弟关系元素,上面的元素设置了 margin-bottom ,下面的元素设置了 margin-top,则间距只会是两者的最大值。
  • 当存在父子关系的元素都设置了 margin-top,同样会外边距合并,结果为两者的最大值。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/OJOweza?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

解决外边距合并的办法

兄弟元素之间:

  • 将一个元素设置 display: inline-block;
  • 只设置一个元素的外边距(推荐)。

父子元素之间:

  • 将一个元素设置 display: inline-block;
  • 给父元素设置 padding: 1px;
  • 给父元素设置 border: 1px solid transparent;
  • 只设置一个元素的外边距(推荐)。

$$tip

通过设置样式属性的方式解决外边距合并的问题总会或多或少地干扰到页面,最好的方式还是理清元素关系,只设置一个元素的外边距。

$$