HTML-элемент, который по умолчанию отображается: inline-block?

Ответ 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/

Ответ 2

Есть ли тот, который по умолчанию имеет значение inline-block?

Строго говоря, нет нет. Спецификации HTML W3 никогда не указывают значения свойств CSS по умолчанию для любых элементов. Они предоставляют "таблицу стилей по умолчанию" для HTML 4, но разработчикам предлагается только использовать ее - это не требование или какой-либо мандат. Спецификации HTML 5 указывают на "типичные свойства отображения по умолчанию", но, опять же, они не требуются (также имейте в виду, что HTML 5 все равно является рабочим проектом).

Таким образом, все значения по умолчанию до браузера и то, как разработчики на самом деле ощущают элементы, должны отображаться пользователю. Никто не может гарантировать, что определенный элемент будет отображаться как inline-block или любым другим способом в каком-либо браузере. Вы всегда должны явно указывать это, если хотите, чтобы это произошло. Не полагайтесь на "значения по умолчанию".

Если нет, какое специальное имя тега было бы подходящим для применения "встроенного блока" с помощью CSS? Или я должен придерживаться класса?

Это зависит от вас и от того, как вы разрабатываете свои страницы. Вы всегда должны использовать элементы, которые семантически соответствуют содержимому, содержащемуся в них. Если элемент всегда будет использоваться в контексте, который потребует отображения inline-block, обязательно установите его в таблицу стилей. В противном случае вам придется прибегать к классам или более конкретным селекторам, чтобы ваши элементы отображались правильно.

Ответ 3

Вот скрипт, который получает стандартное отображаемое значение для большинства тэгов HTML.

Fiddle

В хром элементы встроенного блока по умолчанию: "INPUT", "BUTTON", "TEXTAREA", "SELECT"

Ответ 4

В принципе, это зависит от браузера, каково значение по умолчанию для свойства display для каждого элемента. Даже черновики HTML5 не предписывают, какие значения должны использоваться, хотя он представляет "ожидаемый рендеринг" элементов с точки зрения CSS.

В соответствии с таблицей стилей по умолчанию для HTML в спецификации CSS 2.1 элементы с display: inline-block по умолчанию: button, input, select и textarea. Браузеры используют такие настройки, за исключением того, что в Firefox это относится только к button и select.

В разделе Rendering HTML5 CR элементы meter и progress дополнительно описываются как имеющие встроенный блок как "ожидаемый рендеринг", и браузеры, которые реализовали эти элементы, ведут себя так. Элемент keygen также описывается как встроенный блок, но Firefox этого не делает (он реализовал keygen внутренне как select в DOM); IE не поддерживает keygen вообще; Chrome реализует его, как было предложено.

Поскольку все эти элементы имеют довольно специализированные значения, функциональность и рендеринг idiosyncracies, ни один из них не является адекватным для общего использования в качестве элемента, который является встроенным блоком по умолчанию и может иметь различные значения. То, что вы можете использовать для такого элемента, обычно span или div, в зависимости от того, предпочитаете ли вы встроенный или блок как рендеринг по умолчанию.

Ответ 5

Вы можете проверить мой кодовый блок со всеми элементами HTML и их свойствами display по умолчанию. Некоторые теги нарушают синтаксис, но это не имеет значения для нашей цели.

В настоящее время есть 5 элементов с display: inline-block в FF:

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

И еще 2 (включая 5 выше) в Chrome:

1. textarea
2. input

Ответ 6

button, textarea, input и select по умолчанию inline-block.

Если вам нужно inline-block a div, вы должны указать ему имя класса.

.inline-block {
    display: inline-block
}

Тогда...

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

КОРРЕКЦИЯ

Я ошибся в img. Кажется, что он по умолчанию равен inline, а не inline-block

Ответ 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>

Ответ 8

Это не совсем верный ответ на вопрос прямо сейчас, но при достаточной поддержке это может когда-нибудь произойти.

<seg> сокращение от "сегмент". Как и в, отрезки линии.

с полифилом:

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

Было бы неплохо, если бы был официальный, но его нет, так что вот лучшее (IMO) предлагаемое название для такого элемента, который я знаю.

Ответ 9

Моим решением этого является объявление того, что я называю slice.

CSS

sl {
    display: inline-block;
}

использование

<sl>inline block stuff</sl>

Ответ 10

ДА есть элемент, который по умолчанию имеет встроенный.

Ответ - это элемент span.

<span>