Как предотвратить, чтобы заголовки (<h1>) занимали большую ширину, чем им нужно?

Question

Если я определяю заголовок как <h1>, его ширина устанавливается по умолчанию на 100%.

Есть ли способ убедиться, что его ширина установлена ​​на минимально возможное значение?

Answer 1

Вы можете дать ему display: inline. Это заставит его вести себя как любой текстовый элемент - по умолчанию для <h1> установлено display: block.

Есть и другие способы: например, float: left, но я считаю, что это самый простой и тот, который имеет наименьшее количество побочных эффектов.

Обратите внимание, что тогда вам, вероятно, придется добавить <br>, чтобы обеспечить разрыв строки после <h1>.

Answer 2

Вместо display: inline укажите display: inline-block. Это сохранит блочные качества тега h1, за исключением ширины 100%.

Answer 3

Это элемент уровня блока, поэтому он следует правилам display:block. Вы можете установить display:inline, который может делать то, что вам нужно или нет, в зависимости от контекста.