Question

<div>默认为block

<span>默认为inline

是否有一个默认为inline-block？

如果没有，那么使用CSS应用'inline-block'的特殊标签名称是什么？或者我应该坚持使用课程？

Answer 1

据我所知，<img>标记默认为唯一的inline-block。为了安全起见，我会推荐一个课程，你永远不知道什么时候更改某种类型的所有元素会回来咬你。或者，您可以随时组成自己的标记并为其指定display:inline-block;。这样您就不会更改标准元素的默认功能......

修改

button，textarea，input和select元素似乎也inline-block

来源：

根据此img inline-block http://dev.w3.org/html5/markup/img.html#img-display

此处声称button，textarea等也是如此：http://www.w3.org/TR/CSS2/sample.html

编辑＃2

虽然上述消息来源声称img代码为inline-block，但感谢Alohci认为它们只是inline http://jsfiddle.net/AQ2yp/

以下是在Firefox中测试的：

button是inline-block：http://jsfiddle.net/GLS4P/

textarea是inline：http://jsfiddle.net/235vc/

input是inline：http://jsfiddle.net/RFKe8/

select是inline-block：http://jsfiddle.net/5B4Gs/

Answer 2

是否有一个默认为inline-block？

严格来说，没有。 W3 HTML规范不会为任何元素指定默认的CSS属性值。他们确实为HTML 4提供了"default style sheet"，但开发人员只是鼓励使用它 - 这不是一项要求或任何形式的授权。 HTML 5规范指出“典型的默认显示属性”，但同样不需要这些（也请记住HTML 5仍然是工作草案）。

这样就可以将所有默认值保留到浏览器中，以及开发人员应该如何向用户显示元素。没有人能保证特定元素在某人的浏览器中显示为inline-block或任何其他方式。 如果您希望它发生，您应该始终明确设置。不要依赖“默认设置”。

如果没有，那么使用CSS应用'inline-block'的特殊标签名称是什么？或者我应该坚持使用课程？

这取决于您以及您如何设计网页。您应该始终使用在语义上适合其中包含的内容的元素。如果元素总是在需要inline-block显示的上下文中使用，请务必将其设置为样式表中的元素。否则，您将不得不求助于类或更具体的选择器，以便正确显示元素。

Answer 3

这是一个小提琴，可以获取大多数HTML标签的默认显示值。

Fiddle

在chrome中，默认的内联块元素为："INPUT", "BUTTON", "TEXTAREA", "SELECT"

Answer 4

默认情况下，您可以使用所有HTML元素及其display属性检查我的codepen。 某些标签是语法断开的，但它对我们的目的无关紧要。

目前， FF 中有 5 元素display: inline-block：

<button>
<select>
<meter>
<progress>
<marquee>

Chrome中的其他 2 （包括5个以上）：

textarea
input

Answer 5

原则上，它取决于浏览器display属性的默认值是什么。甚至HTML5草案都没有规定必须使用哪些值，尽管它以CSS的形式呈现元素的“预期呈现”。

根据CSS 2.1规范中的HTML default style sheet，默认情况下display: inline-block的元素为button，input，select和{ {1}}。浏览器使用此类设置，但在Firefox中，这仅适用于textarea和button。

在HTML5 CR的Rendering部分中，select和meter元素另外被描述为具有内嵌块作为“预期渲染”，并且已实现这些元素的浏览器似乎表现那样。 progress元素也被描述为内联块，但Firefox不会这样做（它在DOM内部实现keygen作为keygen; IE根本不支持select; Chrome按照建议实现它。

由于所有这些元素都具有相当特殊的含义，功能和渲染特性，因此它们都不足以作为默认情况下作为内联块的元素，并且可能具有不同的含义。您可以对此类元素使用的内容通常为keygen或span，具体取决于您是选择内联还是阻止作为默认呈现。

Answer 6

button，textarea，input和select默认为inline-block。

如果你想要inline-block div，你可以给它一个班级名称。

.inline-block {
    display: inline-block
}

则...

<div class="inline-block"></div>

<强> CORRECTION

我误解了img。它似乎默认为inline而不是inline-block

Answer 7

现在，您可以创建一个自定义元素（例如：<inline-block>或其他任何东西），其CSS属性display会默认设置为inline-block。

customElements.define( 'inline-block', class extends HTMLElement {
    constructor() {
        super()
        this.attachShadow( { mode: 'open' } )
            .innerHTML = `<style> :host { display: inline-block } </style>
                          <slot></slot>`
    }
} )

#hw { background-color: lightblue }

<inline-block id="hw">Hello World</inline-block>

Answer 8

我对此的解决方案是声明我所说的slice。

CSS

sl {
    display: inline-block;
}

用法

<sl>inline block stuff</sl>

Answer 9

这对于现在的问题并不是真正的答案，但有足够的支持，它可能会在某一天出现。

<seg>“段”的缩写。如同一段线。

使用polyfill：

<style> seg { display: inline-block; } </style>

如果有一个官方版本真的会很好，但是没有，所以这里是我所知道的最佳（IMO）建议名称。

Answer 10

是的，有一个默认为内联的元素。

答案是span元素。

<span>

默认显示的HTML元素：inline-block？

10 个答案: