Строчные элементы

Строчные элементы предназначены для частей текста. Они стоят в строке среди слов, и их ширина и высота равны ширине и высоте содержимого. Поэтому свойства width и height на них не действуют, как и верхний и нижний внешние отступы. А отступы слева и справа работают как обычно.

Изображения — исключение. Вы могли заметить, что width подействовало на фотографию, даже когда она была строчной. Изображения — это так называемые заменяемые элементы: их содержимое берётся извне (из файла изображения), и браузер задаёт им размеры, как блокам, даже если они строчные.

В HTML есть и строчный элемент без собственного смысла: span. Это строчный двойник div. Мы используем его, чтобы обернуть часть текста, которую хотим оформить:

<p>Цена: <span class="price">500 ₽</span></p>

С помощью display: inline блочный элемент можно сделать строчным. Так делают простое меню: элементы списка (li) обычно стоят друг под другом, но если они строчные, то выстраиваются в ряд, как слова.

На самом деле у элементов списка по умолчанию особое значение display: list-item. Они ведут себя как блоки, но с маркером. Если сделать их строчными, маркеры исчезнут.