Особенности строчных элементов

Давайте вспомним особенности строчных элементов:

1. Свойства, связанные с размерами (width, height), не применимы.

Размеры строчных элементов определяются их содержимым и не могут меняться с помощью свойств width и height, которые, задают ширину и высоту элемента. Добавление этих свойств к строчным элементам просто игнорируется.

2. Размер элемента равен его содержимому плюс значения margin, border и padding.

Несмотря на то, что явно задать размеры элемента нельзя, на него можно влиять косвенно с помощью свойств margin, border и padding, значения которых суммируются с размерами содержимого.

Рисунок 1.

В данном примере внутрь блочного элемента <h1> добавлен строчный элемент <span> и для него уже заданы свойства margin, padding и border. Это сделано для того, чтобы линия была строго под текстом (рис. 1), а не на всю длину блока, как получилось бы, добавь мы border для h1 напрямую.

Важно!

Заметьте одну особенность — для строчных элементов margin работает только по горизонтали, но никак не по вертикали. Таким образом, свойства margin-top и margin-bottom не действуют.

3. Срочные элементы переносятся на другую строку при необходимости.

Раз мы имеем дело со строками, то текст, естественно, переносится, чтобы строка целиком поместилась по ширине. Перенос текста, как правило, происходит в месте пробела и может разделить наш строчный элемент на две части и более. Это не страшно, пока к элементу не применяется стилевое оформление. На рис. 2 показано, как фон и рамка разбивается на две части.

Чтобы запретить перенос текста внутри элемента, добавьте свойство white-space со значением nowrap(пример 2).

Перенос текста считается за пробел.

В коде HTML любой перенос текста воспринимается браузером как пробел, это касается и размещения элементов на отдельных строках. Сравните два абзаца в примере 3. В первом абзаце каждый <span> располагается на отдельной строке, а во втором абзаце код идёт сплошной строкой без пробелов и переносов.

Результат данного примера показан на рис. 3. В первой строке между цветных прямоугольников появилось небольшое пространство, а вторая строка выглядит сплошной.

Можно выравнивать по вертикали с помощью свойства vertical-align.

Свойство vertical-align выравнивает элементы относительно друг друга по вертикали, что позволяет делать верхний и нижний индексы, задавать выравнивание содержимого ячеек таблицы, задавать положение блоков и др. В примере 4 показано выравнивание картинок и текста по середине друг друга.

Пример 4

Преобразование в строчный элемент

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

Внимание!

Превращение элемента в строчный не даёт право нарушать структуру кода HTML и порядок вложения элементов.

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

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

Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают ситуации, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 1 состоит из секций, в которые входит изображение с подписью к нему, при этом секции выстраиваются по горизонтали, занимая всю доступную ширину. При уменьшении окна браузера секции переходят на другую строку.

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

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

Кроме того, в HTML существует ряд элементов, для которых значение inline-block задано по умолчанию: <button>, <input>, <textarea>, <select> (с этими элементами мы познакомимся чуть позже).

Характеристики этих элементов следующие.

• Высота и ширина элемента вычисляется браузером автоматически, исходя из содержимого блока.
• Размеры содержимого можно устанавливать через свойства width и height.
• Ширина блока получается сложением значений width, margin, border и padding.
• Высота блока получается сложением значений height, margin, border и padding.
• Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
• Элементы можно выравнивать по вертикали с помощью свойства vertical-align.
• Перенос текста считается за пробел.