html外边距图,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图解

先看一个实例：

div{

background-color:yellow;

}

.div2{

margin:100px 50px;

height:50px;

}

This is a paragraph with no specified margins.

This is a paragraph with specified margins.

码农教程 http://www.manongjc.com/article/1227.html

截图如下：

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