原文来自海玉的博客:http://www.hicss.net/do-not-tell-me-you-understand-margin/

【个人想法】

1.“这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠”。我认为把“一个盒子如果没有上补白(padding-top)和上边框(border-top)”中的“”改为“”比较合适。

2.“margin也能用于内联元素,这是规范所允许的,但是margin-top和margin-bottom对内联元素(对行)的高度没有影响,并且由于边界效果(margin效果)是透明的,他也没有任何的视觉影响。”

我觉得应该是margin-top和margin-bottom对非置换元素的内联元素(对行)的高度没有影响,这样说比较严谨。为属于置换元素的内联元素button(其余置换元素也试过了)添加margin-top和margin-bottm试一下结果发现margin-top和margin-bottm对button是有视觉影响的:

而margin-top和margin-bottm对非置换元素的内联元素big无视觉影响(虽然margin-top和margin-bottom确实有值,但并不表现出来)。

可是big看起来好像有margin-top和margin-bottom的视觉效果一样,与button处于同一行。但其实这样的视觉效果是由同处一行的内联元素button带来的,因为button设置的margin-top和margin-bottom是200px,而big设置的是300px,但视觉效果却是200px的上边距和下边距,由此也可再次证明big的上下边距无视觉效果影响(如果有,那么它应该距离浏览器顶部300px,而不是和button一样是200px)。

【速记(摘自原文)】

1.“外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。”
2.“一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。再说了白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素,祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己的margin当领导的margin执行。”

3.“置换元素(replaced element)主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知,非置换元素(non-replaced element)就是除了 img, input, textarea, select, object 等置换元素以外的元素。”

4.“margin 属性可以应用于几乎所有的元素,除了表格显示类型(不包括 table-caption, table and inline-table)的元素,而且垂直外边距对非置换内联元素(non-replaced inline element)不起作用。

5.常见的浏览器下margin出现的bug 见原文最后。

读《不要告诉我你懂margin(海玉的博客)》有感的更多相关文章

  1. 读<走出软件作坊>有感

    1.成功的人都是在不可能完成任务的情况下完成的,成功的人也从来不会抱怨客观条件多么糟糕. 2.公司给你的资源,永远小于你做事需要的资源,这就是现实,就这么多人,就这样的素质,必须在现状中想出做事的办法 ...

  2. 为什么DIY报价----走出软件作坊:三五个人十来条枪 如何成为开发正规军(十二)[转]

    前段时间,写了一个开发.实施.服务费用计算三部曲. 水清则无鱼--走出软件作坊:三五个人十来条枪 如何成为开发正规军(八) 实施费用也能DIY--走出软件作坊:三五个人十来条枪 如何成为开发正规军(九 ...

  3. 将服务费用DIY到底----走出软件作坊:三五个人十来条枪 如何成为开发正规军(十)[转]

    前一段时间,讲了一系列开发经理.实施经理.服务经理的工具箱:开发经理的工具箱---走出软件作坊:三五个人十来条枪 如何成为开发正规军(三) ,实施经理的工具箱--走出软件作坊:三五个人十来条枪 如何成 ...

  4. 《走出软件作坊》//TODO

    目录 简介 结束语 简介 作者吕建伟(@阿朱),研发管理专家,原京东技术学院院长,中国互联网技术联盟发起人,历任首席架构师.技术总监以及CTO等职位.目前已接受用友集团董事长王文京邀请,加入用友组建研 ...

  5. 实施费用也能DIY--走出软件作坊:三五个人十来条枪 如何成为开发正规军(九)[转]

    上次咱们讲完了开发费用的计算,很多人在后面跟帖在那里算费用. 有人说:你把程序员都不当人,94天,一天都不休息啊. 我想答曰:94天,是工作时间.不算双休日在里面.也就是说,实际的开发周期长度是94+ ...

  6. Sql Server查询性能优化之走出索引的误区

    据了解绝大多数开发人员对于索引的理解都是一知半解,局限于大多数日常工作没有机会.也什么没有必要去关心.了解索引,实在哪天某个查询太慢了找到查询条件建个索引就ok,哪天又有个查询慢了,再建立个索引就是, ...

  7. 走出MFC子类化的迷宫

    走出MFC子类化的迷宫 KEY WORDS:子类化 SUBCLASSWINDOW  MFC消息机制 许多Windows程序员都是跳过SDK直接进行RAD开发工具[或VC,我想VC应不属于RAD]的学习 ...

  8. ofo走出校园观察:市场定位导致产品错位?

    Ofo和摩拜单车虽然同样都是做单车共享,但实际上两者在最初的市场定位是有明显的差异的,因此提供的产品方案也存在巨大的差异. 市场定位不同,导致产品方案的巨大差异 摩拜单车一开始就定位于开放市场,充分的 ...

  9. 对于家政020 APP平台如何走出资本寒冬?

    成都亿合科技小编了解到,随着O2O烧钱大战过去,网络上流传的一份O2O项目死亡名单上显示,近年来,汽车.社区.旅游.教育等16个领域的多个O2O项目关门大吉,仅外卖餐饮O2O项目倒闭的就有十几个.只有 ...

  10. 走出测试,走向CEO

    飞测说:大家好,我们又见面了,我是黑夜小怪.不巧,今晚加班回来路上,湿身了,淋了个落汤鸡,不过明天也许可以看海了,也就呵呵了,原本想回来后聊些技术的,现在突然想先聊聊我的一些想法,仅供交流. 走出测试 ...

随机推荐

  1. 折腾源WRT的AC路无线路由-2

    在创纪录的开箱图,开箱后,我觉得大尺寸,因此,获得一些各种尺寸,喜欢网上购物的参考.也许这,安装后,它占用的大小:基本长度=28.5cm.深度=19.5cm,高=19.5,因为制造商推荐的约两个天线是 ...

  2. ProvissyTool Update Support Page

    DO NOT REPLY. ############# #??????# ############

  3. awk精简教材

    awk就不多介绍了,最优秀的文本处理工具之一 一.内置变量表 属性 说明 $0 当前记录(作为单个变量) $1~$n 当前记录的第n个字段,字段间由FS分隔 FS 输入字段分隔符 默认是空格 NF 当 ...

  4. 【转】百度API获取城市名地名(附源码)

    在做一个软件时,用到了定位功能.网上有很多关于google 的GPS定位,但网上关于google定位都没有用, 搜索下原因:(这里建议大家在中国就尽量不使用系统自带的定位) 因为Google的服务器不 ...

  5. 喜大本\\ u0026普,微软的开源

    词汇表--喜大本\\ u0026普:爱过.有趣的游戏,庆祝.奔走相告.简而言之<reload=1">微软宣布.NET开发环境开源>是个好消息. 前言及历史回想 就我个人来说 ...

  6. ADFS 2.0 配置简介 PartⅢ – 声明规则语言

    上一篇我们最终把 ADFS 与应用之间的信任关系建立起来了,但是应用接收到的声明信息只有默认的两个,这次我们就来学学怎么配置声明. 一.声明存储配置 ADFS 目前默认支持三种方式的声明值存储,另外还 ...

  7. beanutils中jdbc

    public class JDBCTest { //    public static void main(String[] args) throws Exception {//        Cla ...

  8. 获得WCF Client端的本地端口

    获得WCF Client端的本地端口 最近需要做个小功能,当WCF调用远程服务时,显示该调用的网速或流量.其中比较关键的一步就是需要获得WCF  Client端的本地端口,原来以为是个简单的事情,结果 ...

  9. wpf中xps文档合并功能实现

    跟着上一篇的xps文档套打的文章,近期一直在研究xps打印技术,其中用户提到了一个需求,要求能够多页面进行打印,我的想法是,先生成xps文件,然后将文件读取出来以后,合并成一个文件来处理. 如果要是直 ...

  10. MVC 4 插件化架构简单实现

    转ASP.NET MVC 4 插件化架构简单实现-思路篇   用过和做过插件的都会了解插件的好处,园子里也有很多和讨论,但大都只些简单的加载程序集什么的,这里主要讨论的就是使用 ASP.NET MVC ...