CSS displayinlineinline-block值之间到底有什么区别?

推荐答案

A visual answer

想象一下<div>中有一个<span>元素.例如,如果将<span>元素的高度设置为<span>px,并使用红色边框,则它将如下所示

display: inline

DISPLAY:INLINE

display: inline-block

显示:内联块

display: block

在此处输入图像描述

代码:http://jsfiddle.net/Mta2b/

display:inline-block的元素类似于display:inline个元素,但它们可以有widthheight.这意味着您可以将内联挡路元素用作挡路,同时将其在文本或其他元素中流动.

摘要支持的样式差异:

  • inline:只有margin-leftmargin-rightpadding-leftpadding-right
  • inline-block:margin,padding,height,width

Css相关问答推荐

我如何才能 Select 只 Select 第一个父元素,该元素包含另一个元素,其中有给定类?

如何防止背景重复图像被截断

使用普通 CSS 的视口对角线长度

当值小于 1 时理解 flex-shrink

Angular 以Angular 获取当前聚焦的元素

网格在行方向上的大小不正确

我在 ins 标签中有一个 img 标签,更改 ins 格式覆盖图像的视图

网格区域即使使用 fr 也不会减小其宽度

带填充的水平边框

CSS3 的 :root 伪类和 html 有什么区别?

如何创建一个与 Bootstrap 3 配合得很好的粘性页脚

更改最后一个
  • 的 CSS
  • 让 div 占据 100% 身体高度,减go 固定高度的页眉和页脚

    如何在 iOS 上获取带有 CSS 溢出的滚动条

    数据协议 URL 大小限制

    为什么是垂直对齐:文本顶部;不能在 CSS 中工作

    为什么浏览器会为 CSS 属性创建供应商前缀?

    css 中的 clearfix 类有什么作用?

    在 CSS 中表示 100% 的 1/3 的最佳方式是什么?

    是否可以在 CSS 中定义常量?