Установка ширины встроенных элементов

Вы можете установить ширину встроенных элементов, таких как <span>, <em> и <strong>, но вы не заметите никакого эффекта, пока вы их не разместите.

a) Я думал, что ширина встроенного элемента не может быть установлена?

b) Предполагая, что ширина может быть задана - мы не заметим никаких эффектов (таким образом, указанную ширину) до тех пор, пока мы не поместим встроенный элемент. Укажите, как и где?

c) Почему ширина встроенных элементов проявляется только тогда, когда мы "размещаем" их?

Ответы

Ответ 1

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

Вы можете явно объявить подобное поведение с помощью свойства CSS display. Наиболее распространенными параметрами являются display: inline (по умолчанию), display: block и display: none.
Полная ссылка для свойства display доступна здесь.

Однако следует отметить, что спецификация HTML 4.01 препятствует использованию "переопределения традиционной интерпретации HTML-элементов":

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

Ответ 2

Также есть опция display: inline-block, которая может дать вам лучшее из обоих миров. Однако будьте осторожны с совместимостью между браузерами.

Ответ 3

a) Ширина встроенного элемента игнорируется

b, c) Когда вы "позиционируете" встроенный элемент (я предполагаю, что это означает использование позиции: абсолютный), вы фактически делаете его блочным элементом, ширина которого интерпретируется браузером

Ответ 4

Это означает, что если вы примените position: absolute к встроенному элементу, он станет блочным элементом и шириной усиления.

Ответ 5

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

Ответ 6

а. Ширина встроенных элементов игнорируется.

б. Фактически вы можете применить ширину к элементу, если установить display: inline-block;, но для просмотра результатов вы также должны применить overflow: hidden;.

Чтобы иметь все преимущества встроенных и блочных типов, вы можете использовать следующий фрагмент:

display: inline-block; width: 50%; // or px, em, etc. overflow: hidden; text-overflow: ellipsis;

В этом случае вы можете управлять шириной и иметь функцию многоточия текста.

Ответ 7

Элемент Inline не может иметь ширину. Ширина - это свойство элемента блока. Таким образом, для использования свойства ширины над встроенным элементом или элементом с отображением отображения встроенного набора в виде встроенного блока, например: display: inline-block;