• 当前位置:首页 > 日志 > DIV+CSS中padding和margin属性用法
  • 博客搬到SAE了,这个还是比较省心的。不用老是为备份担心。
  • 开启友情赞助空间
  • 无聊了:[ 探索发现 ] 一下,精彩文章等着你哦!

DIV+CSS中padding和margin属性用法

2013-07-16 02:14

2,066阅览 0条评 日志 arno

因为在修改现在的主题,所以把一些问题也写写~多写写东西有助记忆嘛~哈哈哈。

 

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;

根据上,右,下,左的顺时针规则,简写为
margin:40px40px40px40px;

 

 

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

  1. margin:40px40px;

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

  1. margin:40px;

2.Padding:

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

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

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

本文声明

除非注明,否则文章均为 " 枫林博客 " 原创,转载时请注明文章出处。


作者信息:arno \ 2013-07-16 02:14 \ 枫林博客 \

分类标签:日志

本文地址:http://www.blogfeng.com/div-css-padding-and-margin-properties-in-usage.html

还没有人评论哦,赶紧留下爪印吧!

发表评论

* *



​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​