当前位置:首页 > 开发 > Web前端 > 前端 > 正文

将元素设为inline-block 之后的上下margin融合

发表于: 2015-05-07   作者:换个号韩国红果果   来源:转载   浏览:
摘要: 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 但是   设了display:inline-block;后 上下margin不会进行合并 测试代码如下 css h2,p{display:inline-block;} h2,div,p{margin:10px 0px;} h

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

但是
  设了display:inline-block;后 上下margin不会进行合并
测试代码如下

css

h2,p{display:inline-block;}
h2,div,p{margin:10px 0px;}

html

<h2>当你看</h2>
<div>
到true时看不到我</div>
<p>时看不</p>


将元素设为inline-block 之后的上下margin融合

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
1.问题的引出: 产品列表页面场景: 上面是产品图片【img】, 中间是提示库存信息【span】(始终存
一、现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很
  通常我们想让内联元素为行块布局显示,有2种方法,最常见的是方法是.selector {display:block;f
最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-
重构工程师们在设计代码时,有喜欢手动删除行内元素之间产生的额外空隙,并通过设置margin或padding
一、现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很
大家知道在 IE6中 是不支持 display:inline-block的属性的;那我们来看下IE6中 块元素和内敛元素显
大家知道在 IE6中 是不支持 display:inline-block的属性的;那我们来看下IE6中 块元素和内敛元素显
关于空白边叠加的问题,原来觉得很简单,现在发现完全不只书上写的几种情况,特别是元素浮动后,在I
对于div的绝对定位一直以为margin属性是无效的,只是通过top,left,bottom,right定位,然而今天的
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号