CSS外边距margin

CSS margin(外边距)属性定义元素周围的空间。

margin

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

所有的CSS边距属性

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

Margin - 单边外边距属性

在CSS中，它可以指定不同的侧面不同的边距：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
p
{background-color:yellow;
}
p.margin
{margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;
}
</style>
</head><body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body></html>

Margin - 简写属性

为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性。

所有边距属性的简写属性是 margin :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
p
{background-color:yellow;
}
p.margin
{margin:100px 50px;
}
</style>
</head><body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body></html>

margin属性可以有一到四个值。

margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px;
边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px

CSS外边距margin相关推荐

CSS外边距(margin)重叠及防止方法
#css外边距margin重叠及防止方法CSS外边距(margin)重叠及防止方法 #1-什么是外边距margin重叠1. 什么是外边距(margin)重叠外边距重叠是指两个或多个盒子(可能相邻也可 ...
css margin为什么重叠,CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
4、CSS 外边距margin
围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的"空白". 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CS ...
CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
css怎样清除外边距,CSS 外边距
CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的"空白". 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值 ...
html外边距有哪些,css外边距是什么？css外边距属性的介绍
在学习css的时候,会css外边距这一概念,所以,css外边距是什么呢?边框以外就是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素,接下来本篇文章将来给大家介绍关于css外边距属性的相关内容. ...
盒子模型之外边距margin(HTML、CSS)
盒子模型之外边距margin(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta ...
html改变元素外边距,CSS 简明教程 - 外边距 ( margin ) 属性
CSS margin 属性用于在 HTML 元素周围创建「空白」,这些空白在元素的边框之外创建我们可以单独设置元素的上边距,下边距,左边距和右边距,也可以使用 margin 属性同时设置所有边 ...

CSS外边距margin

CSS外边距margin

margin

所有的CSS边距属性

Margin - 单边外边距属性

Margin - 简写属性

CSS外边距margin相关推荐

最新文章

热门文章