HTML-Element, das standardmäßig angezeigt wird: Inline-Block?

<div> Standardmäßig ist block

<span> Standardmäßig ist inline

Gibt es eine, die standardmäßig verwendet wird inline-block?

Wenn nicht, welcher spezielle Tag-Name wäre für mich geeignet, um 'Inline-Block' mit CSS anzuwenden?
Oder sollte ich mich an eine Klasse halten?

Soweit ich weiß, ist das <img>Tag inline-blockstandardmäßig das einzige . Um auf der sicheren Seite zu sein, würde ich eine Klasse empfehlen, man weiß nie, wann das Ändern aller Elemente eines bestimmten Typs zurückkommt, um dich zu beißen. Oder Sie können jederzeit ein eigenes Tag erstellen und diesem zuweisen display:inline-block;. Auf diese Weise ändern Sie nicht die Standardfunktionalität von Standardelementen ...

BEARBEITEN

Es scheint auch , dass button, textarea, input, und selectElemente sind auchinline-block

Quellen:

Demnach imgist inline-block http://dev.w3.org/html5/markup/img.html#img-display

Und hier macht geltend , dass button, textareausw. sind auch: http://www.w3.org/TR/CSS2/sample.html

EDIT # 2

Während die Quelle oben behauptet, dass imgTags sind inline-block, scheint es (dank Alohci), dass sie nur inline http://jsfiddle.net/AQ2yp/ sind.

Folgendes wurde in Firefox getestet:

buttonist inline-block: http://jsfiddle.net/GLS4P/

textareaist inline: http://jsfiddle.net/235vc/

inputist inline: http://jsfiddle.net/RFKe8/

selectist inline-block: http://jsfiddle.net/5B4Gs/

Gibt es eine, die standardmäßig verwendet wird inline-block?

Genau genommen gibt es keine . Die W3 HTML - Spezifikationen geben nicht immer Standard - CSS - Eigenschaftswerte für beliebige Elemente. Sie bieten ein "Standard-Stylesheet" für HTML 4, aber Entwickler werden nur aufgefordert , es zu verwenden - es ist keine Anforderung oder ein Mandat. Die HTML 5-Spezifikationen geben "typische Standardanzeigeeigenschaften" an, diese sind jedoch ebenfalls nicht erforderlich (beachten Sie auch, dass HTML 5 ohnehin noch ein funktionierender Entwurf ist).

Damit bleiben alle Standardwerte dem Browser überlassen und wie die Entwickler tatsächlich der Meinung sind, dass Elemente einem Benutzer angezeigt werden sollten. Niemand kann garantieren, dass ein bestimmtes Element inline-blockim Browser einer anderen Person oder auf andere Weise angezeigt wird. Sie sollten dies immer explizit festlegen, wenn dies geschehen soll. Verlassen Sie sich nicht auf "Standardeinstellungen".

Wenn nicht, welcher spezielle Tag-Name wäre für mich geeignet, um 'Inline-Block' mit CSS anzuwenden? Oder sollte ich mich an eine Klasse halten?

Dies liegt bei Ihnen und wie Sie Ihre Seiten gestalten. Sie sollten immer Elemente verwenden, die semantisch dem darin enthaltenen Inhalt entsprechen. Wenn das Element immer in einem Kontext verwendet wird, der inline-blockangezeigt werden muss, setzen Sie es auf jeden Fall auf den in Ihrem Stylesheet. Andernfalls müssen Sie auf Klassen oder spezifischere Selektoren zurückgreifen, damit Ihre Elemente ordnungsgemäß angezeigt werden.

Hier ist eine Geige, die den Standardanzeigewert für die meisten HTML-Tags erhält.

Geige

In Chrome sind die Standard-Inline-Block-Elemente: "INPUT", "BUTTON", "TEXTAREA", "SELECT"

Sie können meinen Codepen standardmäßig mit allen HTML-Elementen und deren displayEigenschaften überprüfen . Einige Tags sind syntaktisch fehlerhaft, aber für unseren Zweck spielt dies keine Rolle.

Derzeit gibt es 5 Elemente mit display: inline-blockin FF :

1. <button>
2. <select>
3. <meter>
4. <progress>
5. <marquee>

Und zusätzliche 2 (einschließlich 5 oben) in Chrome:

1. textarea
2. input

Im Prinzip hängt es vom Browser ab, wie hoch der Standardwert für die displayEigenschaft für jedes Element ist. Selbst HTML5-Entwürfe schreiben nicht vor, welche Werte verwendet werden müssen, obwohl sie das „erwartete Rendern“ von Elementen in Bezug auf CSS darstellen.

Den nach Standard - Stylesheet für HTML in der CSS - 2.1 - Spezifikation, die Elemente , die haben display: inline-blockstandardmäßig sind button, input, select, und textarea. Browser verwenden solche Einstellungen, außer dass dies in Firefox nur für buttonund gilt select.

Im Rendering Abschnitt von HTML5 CR, die meterund progresssind Elemente beschreiben zusätzlich als Inline - Block, wie „erwartet Rendering“ und Browser , die diese Elemente umgesetzt haben scheint, so zu verhalten. Das keygenElement wird auch als Inline-Block beschrieben, Firefox tut dies jedoch nicht (es wird keygenintern wie selectim DOM implementiert ). IE unterstützt überhaupt nicht keygen; Chrome implementiert es wie vorgeschlagen.

Da alle diese Elemente eher spezielle Bedeutungen, Funktionen und Rendering-Eigenheiten haben, ist keines von ihnen für die allgemeine Verwendung als Element geeignet, das standardmäßig ein Inline-Block ist und verschiedene Bedeutungen haben kann. Was Sie für ein solches Element verwenden können, ist normalerweise spanoder divabhängig davon, ob Sie Inline oder Block als Standard-Rendering bevorzugen.

Meine Lösung besteht darin, zu erklären, was ich a nenne slice.

CSS

sl {
    display: inline-block;
}

Verwendung

<sl>inline block stuff</sl>

button, textarea, input, Und selectstandardmäßig auf inline-block.

Für den Fall , würden Sie wollen inline-blockein divSie es einen Klassennamen geben würde.

.inline-block {
    display: inline-block
}

Dann...

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

KORREKTUR

Ich habe mich geirrt img. Es scheint, dass es standardmäßig ist inlineund nichtinline-block

Jetzt können Sie ein benutzerdefiniertes Element erstellen (zB: <inline-block>oder was auch immer), die ihren CSS - Eigenschaft hat displaySatz inline-blockstandardmäßig.

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>

Dies ist momentan keine echte Antwort auf die Frage, aber mit genügend Unterstützung könnte es eines Tages sein.

<seg>Abkürzung für "Segment". Wie in Segmenten einer Linie.

mit der Polyfüllung:

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

Es wäre wirklich schön, wenn es einen offiziellen gäbe, aber es gibt keinen, also hier ist der beste (IMO) vorgeschlagene Name für ein solches Element, das ich kenne.

JA, es gibt ein Element, das standardmäßig inline ist.

Die Antwort ist das span-Element.

<span>