当前位置:常识百科馆>游戏数码>电脑>

怎样区分margin和padding

电脑 阅读(1.49W)

操作方法

(01)我们在进行网页制作时都会遇到为元素设定边距的情况,边距又分为外边距和内边距,即margin和padding.

怎样区分margin和padding
怎样区分margin和padding 第2张

(02)查看元素的margin和padding我们需要借助Dreamweaver软件和火狐浏览器中的firebug插件。

怎样区分margin和padding 第3张
怎样区分margin和padding 第4张
怎样区分margin和padding 第5张

(03)margin和padding是在html中的盒模型的基础上出现的,margin是盒子的外边距,即盒子与盒子之间的距离,而padding是内边距,是盒子的边与盒子内部元素的距离。

怎样区分margin和padding 第6张
怎样区分margin和padding 第7张
怎样区分margin和padding 第8张

(04)我们使用firebug查看html,当鼠标点击到相应的代码时,网页中的相应元素会变成蓝色,紧挨着的紫色元素是padding,

怎样区分margin和padding 第9张
怎样区分margin和padding 第10张

(05)蓝色部分旁边的黄色部分是元素的margin值,在元素上方是margin-top,下方是margin-bottom,左边margin-left,右边margin-right。

怎样区分margin和padding 第11张

(06)我们还可以借助于firebug的“布局”选项查看各个元素的内外边框。也就是上面几张图的来源,我们打开一个网页,按下f12,在firebug中查看,然后鼠标选定html中的某个元素,点击右侧的布局。

怎样区分margin和padding 第12张

(07)这样我们看到的一个方框,方框中注明了外边距是多少,内边距是多少。

怎样区分margin和padding 第13张

特别提示

简单总结概括一下就是margin是盒模型的外边距,padding是盒模型的内边距