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

Question

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

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

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

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

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

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

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

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

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

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