DIV+CSS中padding和margin属性用法

开发 前端
本文向大家描述一下DIV+CSS网页布局中padding和margin两个重要属性的用法,确理解这两个属性也是学习用css布局的关键。

DIV+CSS是现在网页布局的主流,你对其中的padding和margin两个重要属性的用法是否了解,这里和大家分享一下,相信本文介绍一定会让你有所收获。

padding和margin两个重要属性的介绍

DIV+CSS是现在网页布局的主流,现在已经很少可以说几乎没人用table布局网页了,但是无论是程序员还是网页设计师都应该掌握DIV+CSS。这篇文章将讲述HTML和CSS的关键—盒子模型(Box model).。理解Box model的关键便是margin和padding属性,,而正确理解这两个属性也是学习用css布局的关键。

以下说明margin和padding属性:

1.Margin:

包括margin-top,margin-right,margin-bottom,margin-left,控制块级元素之间的距离,它们是透明不可见的,对于Fig.2所示的上右下左margin值均为40px,因此代码为:
 

  1. margin-top:40px;  
  2. margin-right:40px;  
  3. margin-bottom:40px;  
  4. margin-left:40px;  
  5.  

根据上,右,下,左的顺时针规则,简写为
margin:40px40px40px40px;
为便于记忆,请参考下图:

 

当上下,左右margin值分别一致,可简写为:
 

  1. margin:40px40px;  
  2.  


前一个40px代表上下margin值,后一个40px代表左右margin值.
当上下左右margin值均一致,可简写为:
 

  1. margin:40px;  
  2.  

2.Padding:

包括padding-top,padding-right,padding-bottom,padding-left,控制块级元素内部,content与border之间的距离,其代码,简写请参考margin属性的写法.

至此,我们已经基本了解margin和padding属性的基本用法.但是,在实际应用中,却总是发生一些让你琢磨不透的事,而它们又或多或少的与margin有关.

注:当你想让两个元素的content在垂直方向(vertically)分隔时,既可以选择padding-top/bottom,也可以选择margin-top/bottom,再此Jorux建议你尽量使用padding-top/bottom来达到你的目的,这是因为css中存在Collapsingmargins(折叠的margins)的现象.

本文来源于php爱好者http://www.phplover.cn/,原文地址:http://www.phplover.cn/post/padding-margin.html

【编辑推荐】

  1. Margin、Border、Padding属性的区别和联系
  2. 实例解析CSS padding 属性用法
  3. 使用CSS margin属性轻松设置外边距
  4. DIV+CSS开发Xhtml网页对SEO优化的影响
  5. DIV CSS网页布局中对段落进行排版的方法


 

责任编辑:佚名 来源: phplover.cn
相关推荐

2010-08-25 08:57:33

marginpadding

2010-08-19 11:32:10

CSSpaddingmargin

2010-09-08 11:06:49

CSSpaddingmargin

2010-08-19 12:55:55

CSSMarginPadding

2010-08-27 10:04:33

borderclearCSS

2010-08-23 09:01:45

MarginPadding

2010-09-16 10:57:15

paddingmarginCSS

2010-08-19 11:22:19

marginpadding

2010-08-24 13:14:36

CSSmargin

2010-08-25 09:25:13

CSSmargin

2010-08-25 11:05:03

CSSpaddingmargin

2010-08-16 10:18:53

DivCSS

2010-09-03 10:43:05

CSSmargin

2010-08-23 13:40:46

CSSpadding-bot

2010-08-23 08:45:08

CSSpadding内边距

2010-08-23 15:33:47

CSSpadding

2010-08-27 11:10:30

CSSmargin

2010-08-19 13:43:07

marginpadding

2010-08-24 11:25:06

DIVCSS

2010-08-25 13:33:55

CSSpadding
点赞
收藏

51CTO技术栈公众号