Text align vertical: vertical-align | Вертикальное выравнивание текста

vertical-align | Вертикальное выравнивание текста

vertical-align [w3.org] работает только с элементами таблицы и inline-элементами (в т.ч. с display: inline-block;).

vertical-align для элементов таблицы и для display: table-cell;

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

▼
baseline
top
bottom

<style>
.demotable {
  background: #E7D5C0;
}
.demotable td {
  height: 150px;
  border: 1px dashed #E7D5C0;
  background: #fff5d7;
  vertical-align: middle; baseline; top; bottom; 
}
</style>

<table>
  <tr>
    <td><img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/>
    <td>текст
    <td><div>строка1<br>строка2</div>
</table>

Строка

Базовая линия (англ. baseline, или линия шрифта) — это воображаемая линия, проходящая по нижнему краю символов без учёта свисаний, например, как у букв «ц», «д», «р», «щ».

display: table-cell; похож на <td>. Высота элемента с display: table-cell; равна высоте наиболее высокого элемента с display: table-cell; из группы. vertical-align тут также выравнивает содержимое по вертикали, но уже по умолчанию имеет значение baseline.

▼
middle
top
bottom

текст

строка1
строка2

<style>
.demotable {
  background: #E7D5C0;
}
.demotable > div {
  display: table-cell;
  height: 150px; 
  border: 1px dashed #E7D5C0;
  background: #fff5d7;
  vertical-align: baseline;middle;top;bottom;
}
</style>

<div>
    <div><img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/></div>
    <div>текст</div>
    <div><div>строка1<br>строка2</div></div>
</div>

Если элемент с display: table-cell; нужно выровнять по высоте родителя, то родителю нужно указать display: table; или display: inline-table;.

▼
display: table;

текст

строка1
строка2

<style>
.demotable {
  display: table;
  height: 150px; 
  background: #E7D5C0;
}
.demotable > div {
  display: table-cell;
  border: 1px dashed #E7D5C0;
  background: #fff5d7;
  vertical-align: middle;
}
</style>

<div>
    <div><img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/></div>
    <div>текст</div>
    <div><div>строка1<br>строка2</div></div>
</div>

vertical-align у элементов с display: inline;, display: inline-block; и display: inline-table;

vertical-align у строчных тегов выравнивает по вертикали сам элемент относительно родителя, если его высота меньше высоты текущей строки родителя (свойство line-height).

▼
top
text-top
middle
bottom
text-bottom
inherit
Отступ сверху: px
Высота элемента: px
Отступ снизу: px

<style>
.sem {
  background: #fff5d7;
  line-height: 150px;
  font-size: 0; 
}
.sem div {
  display: inline-block;
  font-size: medium;
  line-height: normal;
  vertical-align: baselinetoptext-topmiddlebottomtext-bottominherit ;
}
</style>

<div><div>

</div></div>

Или относительно соседних элементов, находящихся на данной строке.

▼
top
text-top
middle
bottom
text-bottom
sub
super
inherit

Элемент <sub>Текст строки x <sup>display: inline-block;

<style>
b {
  font-size: 150%;
  vertical-align: baseline; top; text-top; middle; bottom; text-bottom; sub; super; inherit; 
}
span {
  display: inline-block;
  height: 5em;
}
</style>

<b>Элемент</b> <sub>&lt;sub&gt;</sub> Текст строки x <sup>&lt;sup&gt;</sup> <span>display: inline-block;</span> <img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/>

Практическое использование: Как сделать обтекание картинки текстом.

Или vertical-align сам увеличивает строку родителя на значение, указанное в px или %.

%
px

Элемент <sub>Текст строки x <sup>display: inline-block;

<style>
b {
  font-size: 150%;
  vertical-align: baseline;
}
span {
  display: inline-block;
  height: 100px;
}
</style>

<b>Элемент</b> <sub>&lt;sub&gt;</sub> Текст строки x <sup>&lt;sup&gt;</sup> <span>display: inline-block;</span> <img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/>

vertical-align не работает

Ещё раз хочу обратить внимание на то, что для inline-элементов vertical-align: middle;:

1. выравнивает сам элемент, а не его содержимое. То есть не будут желаемого результата, если vertical-align присвоить родителю.
2. выравнивает элемент только относительно других соседних элементов, если для родителя не указана line-height. То есть у родителя должно быть два и более дочерних элементов.

у родителя
без соседей
ура, оно!

<style>
.parent {
  min-height: 150px; 
  background: #E7D5C0;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  width: 100%;
}
.parent div {
  max-width: 300px; 
  width: 100%; 
  height: 100px; 
  background: #fff5d7; 
  text-align: left; 
  display: inline-block;
  vertical-align: middle;
  vertical-align: middle;
}
.parent:before {
  content: "";
  display: inline-block;
  min-height: inherit;
  height: 100%;
  vertical-align: middle;
}
</style>

<div><div></div></div>

Этот вариант вертикального выравнивания текста по центру блока предпочтителен, поскольку line-height может не поддерживаться мобильными браузерами, такими как Opera Mini [opera.com], и равнозначен с display: table-cell;.

CSS: Вертикальное выравнивание текста

Часто при вёрстке возникает потребность в вертикальном выравнивании текста в блоке. Если это нужно сделать в ячейке таблицы, то задается значение CSS-свойства vertical-align.

Но возникает резонный вопрос, нельзя ли обойтись без таблицы, без перегрузки разметки страницы лишними тегами? Ответ: «можно», но из-за плохой поддержки CSS браузером MSIE решение задачи для него будет отличаться от решения для остальных распространённых браузеров.

В качестве примера рассмотрим следующий фрагмент:

<style type="text/css">
div {
border: 1px solid #000;
height: 10em;
width: 10em;
}
</style>
<div>
<span>Some text</span>
</div>


и попытаемся вертикально выровнять текст по центру блока и по нижнему краю блока.

Решение задачи

«Правильные» браузеры (включая MSIE

Большинство современных браузеров поддерживают CSS2.1, а именно значение table-cell для свойства display. Это даёт нам возможность заставить блок с текстом отображаться как ячейка таблицы и, воспользовавшись этим, выровнять текст по вертикали:

div {
display: table-cell;
vertical-align: middle;
}

или

div {
display: table-cell;
vertical-align: bottom;
}

Internet Explorer (до 7-й версии включительно)

Решить задачу выравнивания текста по нижнему краю блока в MSIE можно с помощью абсолютного позиционирования (тут нам пригодится строковой элемент вложенный в блок):

div {
position: relative;
}
div span {
display: block;
position: absolute;
bottom: 0%;
left: 0%;
width: 100%;
}

Этот набор правил работает и в «правильных» браузерах.

Указывать свойства

div span {
display: block;
width: 100%;
}

не обязательно, но они могут понадобиться, если помимо вертикального выравнивания текста планируется использовать также горизонтальное, например, text-align: center;.

Для вертикального выравнивания текста по центру блока исходный фрагмент придётся всё же усложнить — введём ещё один строковый элемент:

<div>
<span><span>Some text</span></span>
</div>

Тогда искомый набор правил будет иметь следующий вид:

div {
position: relative;
}
div span {
display: block;
position: absolute;
top: 50%;
left: 0%;
width: 100%;
}
div span span {
position: relative;
top: -50%;
}

Смысл этого решения в том, что внутренний элемент позиционируется по вертикали абсолютно на половине высоты блока, а затем смещается вверх на половину собственной высоты. Используется неправильная интерпретация высоты в MSIE.

Существует другой способ решения этой задачи для MSIE — использование expression. Недостаток этого подхода — выравнивание не будет работать при отключенном Javascript, зато он позволяет обойтись меньшим количеством элементов-«оберток» (в идеальном случае вообще без них).

Заключение

Для практического использования остаётся только объединить решения для «правильных» браузеров и MSIE любым приемлемым способом (например, через условные комментарии).

Материал для изучения:

• Vertical Centering in CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• Vertical centering using CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• Vertical align (www.cssplay.co.uk/ie/valign.html)
• vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
• Еще один способ вертикального выравнивания в CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

text-align | htmlbook.ru

Краткая информация

Версии CSS

Описание

Определяет горизонтальное выравнивание текста в пределах элемента.

Синтаксис

text-align: center | justify | left | right | inherit

text-align: center | justify | left | right | start | end

Значения

center

Выравнивание текста по центру. Текст помещается по центру горизонтали окна
браузера или контейнера, где расположен текстовый блок. Строки текста словно
нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный
способ выравнивания активно используется в заголовках и различных подписях,
вроде подрисуночных, он придает официальный и солидный вид оформлению текста.
Во всех других случаях выравнивание по центру применяется редко по той причине,
что читать большой объем такого текста неудобно.

justify

Выравнивание по ширине, что означает одновременное выравнивание по левому
и правому краю. Чтобы произвести это действие браузер в этом случае добавляет
пробелы между словами.

left

Выравнивание текста по левому краю. В этом случае строки текста выравнивается
по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания
является наиболее популярным на сайтах, поскольку позволяет пользователю легко
отыскивать взглядом новую строку и комфортно читать большой текст.

right

Выравнивание текста по правому краю. Этот способ выравнивания выступает
в роли антагониста предыдущему типу. А именно, строки текста равняются по
правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен,
а именно с него начинается чтение новых строк, такой текст читать труднее,
чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому
краю применяется обычно для коротких заголовков объемом не более трех строк.
Мы не рассматриваем специфичные сайты, где текст приходится читать справа
налево, там возможно подобный способ выравнивания и пригодится.

auto

Не изменяет положение элемента.

inherit

Наследует значение родителя.

start

Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.

end

Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-align</title>
  <style>
   div {
    border: 1px solid black; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
    margin-bottom: 5px; /* Отступ снизу */
   }
   #left { text-align: left; }
   #right { text-align: right; }
   #center { text-align: center; }
   .content {
    width: 75%; /* Ширина слоя */
    background: #fc0; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <div><div>Выравнивание по левому краю</div></div>
  <div><div>Выравнивание по центру</div></div>
  <div><div>Выравнивание по правому краю</div></div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Выравнивание текста в браузере Safari

Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

[window.]document.getElementById(«elementID»).style.textAlign

Браузеры

IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.

text-align — Веб-технологии для разработчиков

• Перейти к основному содержимому
• Выбрать язык
• Перейти к поиску

• Технологии
  • Обзор технологий
  • HTML
  • CSS
  • JavaScript
  • Графика
  • HTTP
  • API / DOM
  • Браузерные расширения
  • MathML
• Справочники и руководства
  • Изучение Веб-разработки
  • Уроки
  • Справочники
  • Руководства для разработчиков
  • Доступность
  • Разработка игр
  • …и другая документация
• Оставить отзыв
  • Оставить отзыв
  • Получить помощь по Firefox 🌐
  • Получить помощь по веб-разработке 🌐
  • Присоединиться к сообществу MDN
  • Сообщить о проблеме с контентом 🌐
  • Сообщить о проблеме 🌐

Поиск на MDNОткрыть поиск

1. Прочитайте Веб-технологии для разработчиков
2. Прочитайте CSS
3. text-align

Русский▼

• English (US)
• Deutsch
• Français
• Italiano
• 日本語
• 한국어
• Português (do Brasil)
• 中文 (简体)

На этой странице

Перейти в раздел

выравнивание по вертикали | Вертикальное выравнивание текста

vertical-align [w3.org] работает только с элементами и строками-элементами (в т.ч. с display: inline-block; ).

vertical-align для элементов таблицы и для display: table-cell;

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

▼
исходный уровень
Топ
дно

<стиль>
.demotable {
  фон: # E7D5C0;
}
.demotable td {
  высота: 150 пикселей;
  граница: 1px пунктирная # E7D5C0;
  фон: # fff5d7;
  вертикальное выравнивание:  в середине;   базовый уровень;   верх;   днище; 
}


<таблица>
  
     
     текст
     
 строка1 
 строка2 
 

Строка

Базовая линия (англ.baseline, или линия шрифта) — это воображаемая линия, проходящая по нижнему краю символов без учёта свисаний, например, как у букв «ц», «д», «р», «щ».

дисплей: таблица-ячейка; похож на

▼
средний
Топ
дно

текст

строка1
строка2

<стиль>
.demotable {
  фон: # E7D5C0;
}
.demotable> div {
    дисплей: таблица-ячейка; 
  высота: 150 пикселей;
  граница: 1px пунктирная # E7D5C0;
  фон: # fff5d7;
  вертикальное выравнивание: базовая линия ;   средний;   верх;   днище; 
}



    
  
    
 текст 
    
 
 строка1 
 строка2 
 
 

Если элемент с отображение: таблица-ячейка; выровнять по высоте родителя, то родителю нужно указать дисплей: таблица; или дисплей: inline-table; .

▼
дисплей: таблица;

текст

строка1
строка2

 <стиль>
.demotable {
  дисплей: таблица; 
  высота: 150 пикселей;
  фон: # E7D5C0;
}
.demotable> div {
    дисплей: таблица-ячейка; 
  граница: 1px пунктирная # E7D5C0;
  фон: # fff5d7;
  вертикальное выравнивание: средний;
}



    
  
    
 текст 
    
 
 строка1 
 строка2 
 
 

выравнивание по вертикали у элементов с дисплей: встроенный; , дисплей: строчно-блочный; и дисплей: inline-table;

vertical-align у строчных тегов выравнивает по вертикали сам элемент относительно родителя, если его высота меньше высоты строки родителя (свойство line-height ).

▼
Топ
текст вверху
средний
дно
текст внизу
наследовать
Отступ сверху: px
Высота элемента: px
Отступ снизу: px

 <стиль>
.sem {
  фон: # fff5d7;
  высота строки: 150 пикселей;
  размер шрифта: 0;
}
.sem div {
  дисплей: встроенный блок;
  размер шрифта: средний;
  высота строки: нормальный;
  vertical-align:  baseline   top   text-top   middle   bottom   text-bottom   наследовать ;
}


 


 
 

Или относительно соседних элементов, находящихся в данной строке.

▼
Топ
текст вверху
средний
дно
текст внизу
суб
супер
наследовать

Элемент _{Текст строки x ^{display: inline-block;}}

 <стиль>
b {
  размер шрифта: 150%;
  вертикальное выравнивание: базовая линия ;   верх;   текст вверху;   средний;   днище;   текст-внизу;   саб;   супер;   наследование; 
}
span {
  дисплей: встроенный блок;
  высота: 5em;
}


 Элемент   & lt; sub & gt;  Текст строки x  & lt; sup & gt;   display: inline-block;  
 

Практическое использование: Как сделать обтекание картинки текстом.

Или выровняйте по вертикали сам настройте родителя на значение, указанное в px или % .

%
px

Элемент _{Текст строки x ^{display: inline-block;}}

<стиль>
b {
  размер шрифта: 150%;
  вертикальное выравнивание: базовая линия ; 
}
span {
  дисплей: встроенный блок;
  высота: 100 пикселей;
}


 Элемент   & lt; sub & gt;  Текст строки x  & lt; sup & gt;   display: inline-block;  
 

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

Ещё раз хочу обратить внимание на то, что для inline-elements vertical-align: middle; :

1. выравнивает сам элемент, а не его содержимое. То есть не будут желаемого результата, если vertical-align присвоить родителю.
2. выравнивает элемент только относительно других соседних элементов, если для родителя не указана line-height .То есть у родителя должно быть два и более дочерних элементов.

у родителя
без соседей
ура, оно!

 <стиль>
.parent {
  минимальная высота: 150 пикселей;
  фон: # E7D5C0;
  выравнивание текста: центр; 
  вертикальное выравнивание: средний;
  дисплей: встроенный блок;
  ширина: 100%; 
}
.parent div {
  максимальная ширина: 300 пикселей;
  ширина: 100%;
  высота: 100 пикселей;
  фон: # fff5d7;
  выравнивание текста: слева;
  дисплей: встроенный блок; 
  вертикальное выравнивание: средний;  
  вертикальное выравнивание: средний;
}
.parent: before {
  содержание: "";
  дисплей: встроенный блок;
  мин-высота: наследовать;
  высота: 100%;
  вертикальное выравнивание: средний; 
}


 
 

Этот вариант вертикального выравнивания текста по центру блока предпочтителен, поскольку line-height может не поддерживаться мобильными браузерами, такими как Opera Mini [opera.com], и равнозначен с display: table-cell; .

.

Свойства CSS для оформления текста HTML (vertical-align, text-align, text-indent и другие): WEBCodius

Здравствуйте, уважаемые читатели блога webcodius.ru. В этой статье мы продолжаем изучать основы стилевой разметки CSS и рассмотрим свойства vertical-align, text-align, text-indent и некоторые другие предназначенные для оформления текста html.

В прошлой статье мы рассмотрели свойства font-family, font-size, color и другие атрибуты CSS, которые позволяют задавать параметры шрифтов.Если вы впервые слышите о CSS, то обязательно прочтите статью о назначении каскадных таблиц стилей.

Выравнивание текста с помощью CSS

Начнем с атрибутов стиля, управляющих выводом текста в блочных элементах. Начало со стороны text-align, является фактически заменой атрибута align (используется для выравнивания содержимого html-элементов, например, абзацев p).

Свойство стиля text-align задает горизонтальное выравнивание текста и имеет всего четыре значения:

Доступные значения этого правила определяют выравнивание, соответственно: слева — по левому краю, справа — по правому краю, по центру — по центру и выравнивать — по ширине страницы (одновременно по левому и правому краю за счет увеличения расстояния между словами).В примере этой статьи выравнены по ширине страницы (если вы заметили у него ровные границы и слева и справа) с помощью правил text-align: justify.

По умолчанию, горизонтальное выравнивание выполняется по левому краю, поэтому специально указывать text-align: left не обязательно, если в родительских элементах не было указано другого выравнивания.

Примеры использования свойства:

Следующее свойство CSS text-identify задает отступ для красной строки , например для текста в теге абзаца p.Это правило также, как и выравнивание текста, применимо только для блочных элементов. Синтаксис:

Здесь допускаются абсолютные и относительные отступа. Абсолютные значения (px — пикселы, em, ex и др.) Можно указывать как со знаком плюс, так и со знаком минус. Относительная величина обычно задается в процентах (%). Относительное значение рассчитывается от ширины области, которая отведена под текст. Так, css Правило текста-отступа: 50% задаст красную норму длины этой линии.По умолчанию отступ «красной строки» равенство нулю. Пример:

Далее рассмотрим вертикальное выравнивание — свойство vertical-align . Это свойство применимо уже для всех элементов html и практически для всех означает выравнивание между собой строчных элементов с текстом относительно их линии. Кроме тегов таблицы td и th, в которых по вертикали будет выравниваться весь контент. Синтаксис:

Рассмотрим каждое значение подробнее:

• baseline — выравнивание фрагмента текста по типу родительского элемента.Это значение по умолчанию;
• суб — фрагмент текста изображается в виде нижнего индекса или подстрочным для родительского элемента;
• super — фрагмент текста изображается в виде основного индекса или надстрочным для родительского элемента;
• top — выравнивание фрагмента текста по верхнему краю родительского элемента;
• text-top — выравнивание фрагмента по верхнему краю текста родительского элемента;
• средний — выравнивание центра фрагмента текста по центру родительского элемента;
• снизу — выравнивание фрагмента текста по нижнему краю родительского элемента;
• text-bottom — выравнивание фрагмента по нижнему краю текста родительского элемента;

Можно показать фрагменты теста при различных значениях свойства вертикального выравнивания в браузере Internet Explorer 11:

Кроме вышеперечисленных значений, можно указывать числовые значения.Так, правило CSS vertical-align: 0 будет означать тоже самое, что и запись vertical-align: baseline. Правило вертикального выравнивания: 10px будет смещать текст вверх на 10 соответствующих вариантов линии. Для смещения текста вниз необходимо указывать с минусом.

Сдвиг также можно задавать в относительных единицах измерения, например в em и ex или в процентах.

Для вертикального выравнивания содержимого ячеек таблицы в vertical-align следует использовать значения:

• top — для выравнивания по верхней границе;
• нижний — для выравнивания содержимого по нижней границе ячейки;
• средний — для выравнивания по центру ячеек (используется по умолчанию).

Для достижения нужного результата, как правило, приходится экспериментировать с различными свойствами значений значений vertical-align. Многочисленные возможные значения дают слишком разный результат в различных случаях.

Параметры пробел и перенос слов, управляющие разрывом строк

В очереди параметр white-space, который отвечает за отображение пробельных символов на html странице.

Как мы знаем, по умолчанию браузер объединяет все подряд идущие пробельные символы: пробелы, переносы строк и символы табуляции, — в один пробел.Исключение тег «pre» , помещенный в него текст отображается как есть, со всеми пробелами.

Свойство white-space имеет следующий синтаксис:

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

Использование значения «pre», будет полной аналогией при применении тега «pre». Браузер будет отображать страницу с учетом всех пробелов и переносов, как они были добавлены разработчиком.Если строка текста получиться слишком длинной, то будет добавлена ​​горизонтальная полоса прокрутки.

Значение nowrap запрещает браузеру переносить строки и текст одной строкиой. Единственное, добавление тега «br» позволит перенести текст на новую строку.

Значение предварительно переносится все пробелов и переносов строк, но если строка не помещается в заданную область, то браузер автоматически переносит текст на новую строку.

Ну и значение pre-line преобразует пробелы в один пробел, переводы строк сохраняются и браузер может разорвать слишком длинные строки, чтобы избежать горизонтальной прокрутки.

Пример использования:

Далее рассмотрим параметр переноса слов , который поваляет указать переносить или нет длинные слова, которые не помещаются в заданную область. Это свойство не часто, но иногда без него не обойтись:

перенос слов: нормальный | разрыв слова

Значение указывает на браузеру, что текст можно разрывать только по пробелам и это обычное поведение. А значение break-word разрешает браузеру вставлять разрывы строк внутри слов.Пример:

Параметры тени у текста — свойство text-shadow

Для любителей различных украшательств в стандарте CSS3 появилась возможность задавать тень у текста. Грамотное использование свойств text-shadow позволяет заметно оживить веб-страницу. Синтаксис:

Значение нет отменяет добавление тени у текста и установлено по умолчанию.

Цвет тени задается в любом доступном формате CSS и является не обязательным параметром.По умолчанию цвет тени совпадает с цветом текста.

Горизонтальное смещение тени можно задавать в любой единице измерения поддерживаемой CSS. При положительном значении тень будет располагаться правее текста, при отрицательном — левее. Нулевое положение расположит прямо под текстом и имеет смысл только если задано размытие тени.

Вертикальное смещение тени тоже можно задавать в любой единице измерения поддерживаемой CSS. При положительном значении тень будет смещаться ниже текста, при отрицательном — выше.Нулевое расположение прямо под текстом.

В любой единице измерения задается и радиус размытия тени . Чем больше это значение, тем шире становится тень и сильнее сглаживается. Если этот параметр не установлен, то положение размытия равным нулю. Так как алгоритм сглаживания обычно у разных браузеров отличается, то и вид тени может несколько отличаться в зависимости от.

Рассмотрим пример:

И вот так будет выглядеть абзаца с применением данного правила стиля в Internet Explorer 11:

На этом буду завершать статью.Чтобы узнать больше о свойствах CSS, не забудьте подписаться на обновления блога и читайте статьи из раздела «Справочник CSS». До новых встреч!

.