189 8069 5689

DIV+CSS中padding和margin属性的用法

这篇文章主要介绍“DIV+CSS中padding和margin属性的用法”,在日常操作中,相信很多人在DIV+CSS中padding和margin属性的用法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”DIV+CSS中padding和margin属性的用法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

岱山网站制作公司哪家好,找成都创新互联公司!从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作,到程序开发,运营维护。成都创新互联公司于2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司

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,因此代码为:

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

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

DIV+CSS中padding和margin属性的用法

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

margin:40px40px;


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

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,再此Jorux建议你尽量使用padding-top/bottom来达到你的目的,这是因为css中存在Collapsingmargins(折叠的margins)的现象.

到此,关于“DIV+CSS中padding和margin属性的用法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


本文名称:DIV+CSS中padding和margin属性的用法
本文来源:http://cdxtjz.cn/article/jjcseg.html

其他资讯