css margin外边距详细图解分析

时间:2016-07-20
css margin属性用于设置HTML元素的外边距,包括四个参数,四个参数分别设置margin-top、margin-right、margin-bottom和margin-left等属性值,本文章向大家详细介绍css margin属性的使用方法(包括图解)。

CSS margin简介

css margin属性设置HTML元素的外边距,外边距指的是元素边框到父元素或者同级元素之间的那一部分。

该属性可以有1到4个值。

  • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个,将用于全部的四边。
  • 如果提供两个,第一个用于上、下,第二个用于左、右。
  • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

语法:

margin:值;

如:

margin:10px 5px 15px 20px;/*上边距是10px,右边距是5px,下边距是15px,左边距是20px */
margin:10px 5px 15px; /*上边距是10px,右边距和左边距是5px,下边距是15px */
margin:10px 5px;/*上边距和下边距是10px,右边距和左边距是5px */
margin:10px;/*所有四个边距都是10px */

css margin图解

先看一个实例:

<!DOCTYPE html>
<html>
<head>
<style>
div{
    background-color:yellow;
}
.div2{
   margin:100px 50px;
   height:50px;
}
</style>
</head>

<body>
<div class="div1">This is a paragraph with no specified margins.</div>
<div class="div2">This is a paragraph with specified margins.</div>
  <div>码农教程    http://www.manongjc.com/article/1227.html </div>
</body>

</html>

截图如下:

css margin图解

Margin样式是设置对象与对象之间间距,单独设置一边的间距我们可以使用margin-left、margin-right、margin-top、margin-bottom样式属性,margin是设置盒子对象之间间距,一般设置时候注意margin简写优化。多实践并观察案例理解了margin作用即可很快上手使用margin。