margin相关

1.两个或多个垂直元素,相邻边界会重合

   1)边界都为(正或负)值,取绝对值最大的边界。

    2)一个为负,一个为正,两者相加,如:(10+(-20)= -10)。

解决方案

用padding替代或给其中一个元素增加display:inline-block,添加inline-block的元素会覆盖住没有加inline-block的元素。

如果没有添加inline-block则默认下方的元素覆盖上方的元素

2、嵌套元素间相同方向的margin-top值子元素会传递给父元素,最终父元素的外边距的计算规则同相邻元素的计算规则一致。

解决方案:

用padding替代

给父元素添加overflow:hidden或者display:inline-block

给子元素添加display:inline-block

3、margin缩写

margin: 20px 30px 40px 50px 依次为上、右、下、左

margin: 20px 30px 40px  依次为上、(左右)下

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 一、标准盒模型和怪异模式盒模型 标准盒模型和怪异模式盒模型可以通过box-sizing来设置: 标准盒模型: bo...
    会有猫惹阅读 552评论 0 1
  • margin与可视尺寸,适用范围:1、没有设定width/height的普通block水平元素2、只适用于水平方向...
    大瓶绿茶阅读 508评论 0 0
  • http://www.hicss.net/do-not-tell-me-you-understand-margin...
    lmem阅读 607评论 0 0
  • 有句话是这么说的,人无癖不可深交,以其无深情也。蒲松龄也在《聊斋志异•阿宝》感言,性痴,则其志凝。故书痴者文必工,...
    Hera0417阅读 584评论 0 3