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

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

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;
为便于记忆,请参考下图:

当上下,左右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属性的用法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！