dr.Brain

doctor Brain

мир глазами веб-разработчика

CSS. Управление пробелами

Как управлять пробелами и разрывами строк с помощью свойств CSS: white-space, line-height, word-spacing, vertical-align, height, width, padding и margin

dr.Brain

время чтения 1 мин.

Photo by MILKOVÍ on Unsplash

Пробелы имеют большое значение для верного восприятия текста. Они группируют и разделяют контент, привлекают внимание. создают визуальные разделители.

Для того, чтобы управлять размерами пробелов с помощью CSS, мы можем использовать не только свойство white-space. Предлагаю разделить все свойства, пригодные для данной цели, на две группы:

Свойства для управления свободным пространством в тексте:

  1. white-space,
  2. line-height,
  3. text-align, text-indent, text-overflow,
  4. word-spacing,
  5. vertical-align.

Свойства для управления свободным пространством вокруг текста:

  1. height и width,
  2. padding и margin.

Управление свободным пространством в тексте

white-space

Свойство управляет пробелами внутри элемента, то есть устанавливает параметры пробелов между словами.

Оно определяет: * объединением пробелов внутри элемента, * разрывами строк.

Новые строки Пробелы и табуляции Перенос текста Пробелы в конце строки
normal объединяются объединяются переносится удаляются
pre не меняются не меняются не переносится не меняются
nowrap объединяются объединяются не переносится удаляются
pre-wrap не меняются не меняются переносится объединяются
break-spaces не меняются не меняются переносится переносятся
pre-line не меняются объединяются переносится удаляются

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.