`
换个号韩国红果果
  • 浏览: 48064 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类

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

阅读更多

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

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

css

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

html

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


分享到:
评论

相关推荐

    display:inline、block、inline-block的区别(转的)

    本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别,帮助你更好地理解它们在实际开发中的应用。 首先,我们来看`display:inline`。这种模式使得元素...

    css块状元素与内联元素以及inline-block

    CSS 块状元素、内联元素和 inline-block elementos CSS 中的块状元素(Block Elements)和内联元素(Inline Elements)是两种基本的元素类型,它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素...

    跨浏览器的inline-block声明上承诺了很多提供的却很少

    在web设计中,"inline-block"是一种常用的CSS显示属性,它兼具内联元素和块级元素的特点。内联元素如,块级元素如,分别有其独特的布局特性。内联元素不会以新行开始,而是按照它们在文档中出现的顺序排列,而块级...

    有关display:inline-block在FF出现空白的解决方案

    在网页布局设计中,`display:inline-block` 是一个非常常用且强大的CSS属性,它允许元素在保持块级元素特性的同时,像内联元素一样并排显示。然而,在不同浏览器之间,尤其是在Firefox(FF)上,可能会遇到一些显示...

    inline-block 前世今生1

    display:inline-block 属性是CSS布局中的一个重要概念,它允许元素具有内联元素的特性(如排列在同一行内),同时又能像块级元素那样设置宽度、高度和垂直对齐。这个属性在前端开发中被广泛应用,尤其是用于创建响应...

    display:inline-block的实际应用

    `display:inline-block` 是 `display` 的一个值,它结合了块级元素(block-level element)和内联元素(inline element)的一些特性,为网页布局提供了更灵活的选择。在本篇文章中,我们将深入探讨 `display:inline-...

    IE6的inline-block

    1、display:inline-block 让一个元素具有“区块元素”的属性(可以设置width和height),又具有“内联元素”的属性(不产生换行)。 2、IE中的inline-block IE6不支持这个属性,但IE8开始支持这个属性。 让IE6...

    Firefox Bug: inline/inline-block的间隙采用代码缩进可解决

    然而,`inline-block` 在不同浏览器间存在兼容性问题,特别是在Firefox中有一个知名的bug,表现为相邻的`inline-block`元素之间会有一段看似多余的空白间隙,通常为6像素。这个问题同样存在于IE8,但不适用于更早...

    inline-block带来的元素间距问题解决

    为`inline-block`元素添加负的外边距(如`margin-right: -4px`),但这需要根据实际情况调整,并且可能在不同浏览器中有差异。 4. **使用浮动布局**: 如果不考虑IE6/7的兼容性,可以使用`float`属性代替`display...

    css之display属性之inline-block布局实现详解

    在这个详解中,我们将深入讨论`display`属性中的`inline`、`block`以及`inline-block`值,以及它们在实际布局中的应用。 1. **`display: inline`** `inline`值使得元素作为行内元素显示,这意味着元素会与其他...

    使用display:inline-block居中没有宽度的元素

    将父元素的`text-align`设为`center`,这样父元素内的所有`inline-block`子元素就会被自动居中。这种方式特别适用于动态生成的内容,比如基于数据库的菜单项,它们的宽度可能会随着内容的长度而变化。 总结来说,要...

    display:inline-block的原理分析

    首先,`display:inline-block` 的基本原理是将一个元素呈现为内联元素,但其内容按照块级元素的方式处理。这意味着元素不会强制换行,可以与其他内联元素并排显示,同时能设置宽高并保留内联间距。然而,并非所有...

    关于css display: inline block inline-block的区别分析

    display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏览器有:Opera、Safari。 但很遗憾,最...

    CSS属性display:inline-block用法深入理解

    首先,`display:inline-block`的作用是将元素呈现为内联对象,这意味着它们会与其他内联元素排列在同一行中,不会强制换行。同时,`inline-block`元素的内容会按照块级元素的方式处理,允许设置宽高、内外边距等。...

    inline-block元素的4px空白间距解决方案

    有关于使用inline-block来代替float的讨论也蛮多的,最常说的就是使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的...

    CSS inline-block属性概述及其使用示例

    Inline-block是元素display属性的一个值。这个名字的由来是因为,可以简单的解释为inline+block ;display设置这个值的元素,兼具行内元素( inline elements)跟块级元素(block elements)的特征。块级元素(block...

Global site tag (gtag.js) - Google Analytics