Вертикальные линии

Вертикальные линии – вернее, добавление на html страницу вертикальных линий, это ещё один способ улучшить дизайн страницы. При добавлении контента на страницу сайта, его очень удобно разделять с помощью вертикальных линий.
Вертикальные линии – помогают придать внешнему виду страницы необходимый порядок и сделать блоки с контентом более удобными для восприятия посетителям сайта.
Как мы с Вами знаем, для добавления на html страницу горизонтальных линий, достаточно воспользоваться html тегом hr. Что касается вертикальных линий, то здесь всё гораздо сложнее. Стандартных html средств, для создания вертикальных линий нет.
Поэтому, вертикальные линии – добавляются на страницу, с использованием побочных средств.
Ну что же, давайте в этой статье рассмотрим некоторые из вариантов добавления на страницу сайта вертикальных линий.
Собственно мы рассмотрим два основных способа добавления на страницу вертикальных линий.
В первом варианте, мы рассмотрим создание вертикальных линий, с помощью таблиц. И во втором случае, мы будем создавать вертикальные линии с использованием стилей.
Сразу хотел бы отметить, что графический вариант создания вертикальные линии мы здесь рассматривать не будем.
Итак, давайте создадим вертикальную линию с помощью таблицы. Предположим, что нам необходимо выделить на странице некоторый текст с помощью вертикальной линии, расположенной слева от текста.
Как всегда сразу перейдем к практике. Для этого, создадим тестовый html файл, например с именем vert.html, пусть файл содержит обязательные html теги.
Кроме обязательных тегов, добавим в html код таблицу, в результате получим следующее:

Сохраним наш тестовый файл vert.html и откроем его для просмотра браузером:

Мы видим, что слева от текста у нас построилась вертикальная линия.
Высота вертикальной линии, в данном варианте, определяется высотой столбца с текстом. Ширина линии задается двумя параметрами width.
То есть, для того, чтобы изменить ширину вертикальной линии, необходимо сразу в двух местах, задать одинаковое значение параметру width:
1 - в описании тега td и
2 - в описании тега img.
Цвет вертикальной линии задается параметром bgcolor.
Таким образом, используя html код таблицы, Вы можете создавать на страницах своего сайта вертикальные линии с любыми параметрами и в большинстве случаев, решать задачи, связанные с выделением текста на странице с помощью вертикальных линий.
Теперь давайте рассмотрим вариант создания вертикальных линий с помощью использования стилей. Создадим ещё один html файл, с произвольным именем, например - vert_style.html.
Добавим в этот файл, следующий код:

Если открыть данный файл браузером, то мы увидим, что текст на странице, слева ограничен вертикальной линией:

Как видите, добавляя достаточно простой код, мы получаем хороший наглядный результат.
Текст в данном коде, помещен в контейнер div. Мы знаем, что тег div, поддерживает работу со стилями, что и было использовано для создания вертикальной линии.
Изменяя значения аргументов параметров стилей, можно создать любую вертикальную линию. Давайте перечислим возможности при использовании данного метода.
Итак, параметр height - изменяет высоту вертикальной линии. Ширина блока div задается параметром width.
Параметр border-left, задает сразу три параметра вертикальной линии – толщину линии, тип линии и цвет линии.
И, наконец, параметром padding-left, мы задаём отступ текста от вертикальной линии.

Можешь почитать и вот эту статейку "Изменение положения штампа на изображениях"