Горизонтальні і вертикальні лінії за допомогою html і css

Горизонтальні і вертикальні лінії за допомогою html і css

Всім привіт! Сьогодні я розповім Вам про те, як за допомогою html зробити горизонтальну лінію.

Насправді, необхідність зробити горизонтальну лінію виникає досить часто, наприклад, коли потрібно відокремити одну частину тексту від іншої.

Горизонтальна і вертикальна лінії за допомогою css

Зробити це можна за допомогою css. Для цього, я укладаємо необхідний фрагмент тексту в блок за допомогою тега div, а потім у файлі style.css або безпосередньо в html - коді прописуємо для цього блоку властивості для вірніше або нижньої межі за допомогою border-top і border-bottom. Ось приклад:

В даному випадку, я задав оформлення за допомогою css безпосередньо з коду html, і зробив верхню межу суцільний, а нижню пунктирною лінією.

Ось як це буде виглядати на сторінці:

Горизонтальна лінія за допомогою css.

У цього способу є свої переваги:

  • Великий асортимент налаштувань, які дозволяють задати практично будь-який вид для лінії;
  • Можна створювати як горизонтальні так і вертикальні лінії. Для того, щоб зробити вертикальні лінії необхідно поміняти border-top на border-left, а border-bottom на border-right.

До недоліків можна віднести відносну громіздкість коду.

Однак, як виявилося, вставити в текст горизонтальну риску можна і за допомогою html. При цьому, навіть не обов'язково лізти в css. Для цього використовується тег

.

Горизонтальна лінія за допомогою тега html

Перша особливість цього тега полягає в тому, що у нього немає парного закриває тега. Його можна використовувати в будь-якому місці html - коду між тегами і .

У цього тега є такі атрибути:

  • Width - визначає довжину нашої горизонтальної лінії в пікселях або відсотках;
  • Color - визначає колір лінії;
  • Align - задає вирівнювання лінії по правому краю - right, по лівому краю - left, по центру - center;
  • Size - товщина лінії в пікселях.

Ось приклад html - коду:

А ось так він буде виглядати:

Як бачите, у даного способу є свої недоліки:

  • Менше налаштувань для лінії;
  • Не можна зробити вертикальну лінію.

Зате цей спосіб набагато простіше.