CSS笔记15-外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”

margin属性

使用margin属性设置外边距，可以是任何长度的单位

可以设置为auto，常见的做法是外边距设置长度值。下面是设置四个边距都一样

p {margin:0.25em;
}

也可以分开设置

p {margin-top: 0.25em;margin-right: 16px;margin-bottom: 10%;margin-left: 0.2ex;
}

同样百分比也是根据父元素的width计算的。

值复制

内边距、边框、外边距有一些属性可以设置四个参数，这四个属性是按照顺时针顺序，上、右、下、左。

当使用这种属性时，如果只有一个参数，那么四边的值都是这个参数

如果只有两个参数，那么默认第一个参数是上边的，第二参数是右边的。下边的值默认复制上边的。左边的值默认复制右边的

如果只有三个参数，那么默认是上，右，下的参数。剩下左边的值复制右边的。

p {margin: 0.25em;margin: 0.25em 16px;margin: 0.25em 16px 10%;margin: 0.25em 16px 10% 0.2ex;
}

CSS笔记15-外边距相关推荐

CSS学习之外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...
html定义盒子距离顶底端像素,css - 盒子内外边距
css - 边距元素内边距内边距是指元素包含的内容离元素边框之间的间距,内边距不能设负值.内边距(padding).(边框)border都会撑大盒子,在浏览器中显示的元素的尺寸可能包含了盒子的pa ...
【温故知新】CSS学习笔记（外边距合并）
CSS外边距合并外边距合并使用margin定义块元素的垂直外边距时,可能会出现外边距的合并. 一.相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇的时候,如果上面的元素有下外边距margin ...
11.前端笔记-CSS盒子模型-外边距margin
1.margin 1.1 margin的语法盒子与盒子之间的距离 <!DOCTYPE html> <html lang="en"> <head> ...
css怎样清除外边距,CSS 外边距
CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的"空白". 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值 ...
css特性:空白外边距互相叠加
空白双边距是一个极容易误解的CSS特性.它不是CSS的bug,但如果我们一旦误解,将会给你带来很多麻烦. 先看如下demo代码: <!doctype html> <html> ...
CSS - 盒子模型 - 外边距
文章目录一.外边距属性二.margin的简写方式三.外边距可以让块级盒子水平居中四.行内元素和行内块元素水平居中五.外边距合并相邻块元素垂直外边距的合并六.嵌套块元素垂直外边距的塌陷 ...
html改变元素外边距,CSS 简明教程 - 外边距 ( margin ) 属性
CSS margin 属性用于在 HTML 元素周围创建「空白」,这些空白在元素的边框之外创建我们可以单独设置元素的上边距,下边距,左边距和右边距,也可以使用 margin 属性同时设置所有边 ...
CSS margin（外边距）
margin margin清除周围(外边框)元素区域.margin没有背景颜色,是完全透明的. margin可以单独改变元素的上,下,左,右边距,也可以一次改版所有属性. 可能的值值说明 auto ...
最全的css中解决外边距合并问题
外边距合并首先,我们先来看一下什么是外边距合并. 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆. 简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们 ...

CSS笔记15-外边距

CSS笔记15-外边距相关推荐

最新文章

热门文章