落就是一道风景线……

CSS中margin和padding的上下左右

08.12.2010 · Posted in CSS/HTML

Box model的关键便是margin和padding属性,margin和padding分别是控制块级元素之间和内部的距离。

其中上下左右的距离分别:

margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px;

padding-top: 40px;
padding-right: 40px;
padding-bottom: 40px;
padding-left: 40px;

这样分别来写显得很麻烦,可以直接用类似于margin: 20px 30px 40px 50px;/margin:40px;/margin:20px 30px; 和 padding:20px 30px 40px 50px;/padding:30px等等简写。这其中的顺序是怎样的呢,我们应该正确理解才能使用。

首先说明一下,margin和padding顺序是一样的,我们来看一下:

margin: 20px 30px 40px 50px;     代表: 上  -   右  -  下  -   左

margin:20px 20px 30px;   代表: 上  -  左右   - 下

margin:20px 30px;      代表:上下  - 左右

maring:20px;   代表: 上下左右

基本就是这个样子。End

3 Responses to “CSS中margin和padding的上下左右”

  1. 一直想学CSS 先看看HTML吧 以后在来和博主学习

  2. 谢谢博主的分享,受益了。

Leave a Reply