怎样区分margin和padding

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

  • 06

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

  • 07

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

(0)

相关推荐

  • margin和padding的区别

    介绍一下margin和padding的区别了 操作方法 01 举个列子如下 02 外间距内间距怎么用了? 03 第一种办法(分不清区别的那种) 就是margin和padding都带进去,一个一个的式了 ...

  • css中margin各种bug怎么解决

    在css中margin有很多问题值得我们关注,其中在IE下就有很多bug,这里总结了一下,大家参考一下. 操作方法 01 IE6中双边距Bug: 发生场合:当给父元素内第一个浮动元素设置margin- ...

  • QQ 音乐与 iPhone X 在一起的背后故事 [适配经验]

    如何让 QQ 音乐移动终端更好地运行于 iPhone X ? QQ 音乐团队设计师们做了一些研究工作,从方案对比选型到确定适配方案,都是希望能让产品更好地适配 iPhone X. 本文将与大家详细分享 ...

  • 超全面!界面视觉设计 5 要素

    一款 App 或 Web 产品,从用户体验的角度包含了战略层.范围层.结构层.框架层.表现层.而作为 UI 设计师,如果连「表现层」的内容都还一知半解就去盲目地学习其他领域,这是不提倡的. 这里说的「 ...

  • 浏览器组成及工作原理深度了解

    简介 浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工作原理,我们将看到,从你在地址栏输入google.com到你看到google主页过程中都发生了什么。 将讨论的浏览器 今天,有五种主流浏览 ...

  • 使用EditPlus技巧,提高工作效率(附英文版.自动完成文件.语法文件下载)

    在使用中,我个人也总结了一些使用经验。可能作为高手的你,看来只是“相当肤浅”,但是没有关系,因为我相信,只要把知识共享出来,总能帮助到一些还在进步中的朋友。下面就让我们来开始配置出符合你自己使用习惯的 ...

  • 火狐浏览器中firebug插件使用图文教程

    firebug插件-如何使用firefox进行网页js调试 什么是Firebug 从事了数年的Web开发工作,越来越觉得现在对WEB开发有了更高的要求。要写出漂亮的HTML代码;要编写精致的CSS样式 ...

  • 浏览器是怎样工作的 浏览器从头到尾的工作机制

    浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工 作原理,我们将看到,从你在地址栏输入google.com到你看到google主页过程中都发生了什么。 将讨论的浏览器 今天,有五种主流浏览器— ...

  • 你的图片为什么会"糊"

    8px那篇引起很多回应,我想这要从几个角度来解释。UI 口中的「糊」和 RD 眼里的「糊」是有差别的。图片会糊的原因分成几种: 1. 小图放大会糊。< 这是废话,BJ4。 2. 大图缩小会糊。& ...