怎样区分margin和padding

这是一篇高水准的经验 , 不才才疏学浅 , 不知会写当作怎么个样子 , 大师凑合看吧 , 可是有一点可以包管就是必定是有效的 。
方式/
1我们在进行网页建造时城市碰到为元素设定边距的环境 , 边距又分为内边距和外边距 , 即margin和padding.

怎样区分margin和padding

文章插图

怎样区分margin和padding

文章插图

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

怎样区分margin和padding

文章插图

怎样区分margin和padding

文章插图

怎样区分margin和padding

文章插图

3margin和padding是在html中的盒模子的根本上呈现的 , margin是盒子的外边距 , 即盒子与盒子之间的距离 , 而padding是内边距 , 是盒子的边与盒子内部元素的距离 。

怎样区分margin和padding

文章插图

怎样区分margin和padding

文章插图

怎样区分margin和padding

文章插图

4我们利用firebug查看html , 当鼠标点击到响应的代码时 , 网页中的响应元素会酿成蓝色 , 紧挨着的紫色元素是padding , 

怎样区分margin和padding

文章插图

怎样区分margin和padding

文章插图

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

怎样区分margin和padding

文章插图

6我们还可以借助于firebug的“结构”选项查看各个元素的表里边框 。 也就是上面几张图的来历 , 我们打开一个网页 , 按下f12 , 在firebug中查看 , 然后鼠标选定html中的某个元素 , 点击右侧的结构 。

怎样区分margin和padding

文章插图

7【怎样区分margin和padding】如许我们看到的一个方框 , 方框中注了然外边距是几多 , 内边距是几多 。

怎样区分margin和padding

推荐阅读