Display block в css что такое. Кроссбраузерный inline-block. Синтаксис CSS Display
Последнее обновление: 27.04.2016
Кроме свойства float , которое позволяет изменять позицию элемента, в CSS есть еще одно важное свойство - display . Оно позволяет управлять блоком элемента и также влиять на его позиционирование относительно соседних элементов.
Это свойство может принимать следующие значения:
inline: элемент становится строчным, подобно словам в строке текста
block: элемент становится блочным, как параграф
inline-block: элемент располагается как строка текста
list-item: элемент позиционируется как элемент списка обычно с добавление маркера виде точки или порядкового номера
run-in: тип блока элемента зависит от окружающих элементов
flex: позволяет осуществлять гибкое позиционирование элментов
table , inline-table: позволяет расположить элементы в виде таблицы
none: элемент не виден и удален из разметки html
Итак, значение block позволяет определить блочный элемент. Такой элемент визуально отделяется от соседних элементов переносом строки, как, например, элемент параграфа p или элемент div, которые по умолчанию являются блочными и при визуализации веб-страницы визуально переносятся на новую строку.
Однако элемент span в отличие от элемента div блочным не является. Поэтому посмотрим, какие с ним произойдут изменения при применении значения block:
Здесь определено два элемента span, но один из них является блочным, так как к нему применяется стиль display: block; . Поэтому этот элемент span переносится на новую строку.
В отличие от блочных элементов строчные встраиваются в строку, так как имеют для свойства display значение inline . Элемент span как раз по умолчанию имеет стиль display: inline , поэтому и встраивается в строку, а не переносится на следующую, как параграфы или div. И теперь произведем обратную процедуру - сделаем блочный элемент div строчным:
Следует учитывать, что при применении значения inline браузер игнорирует некоторые свойства, такие как width , height , margin .
inline-block
Еще одно значение - inline-block - представляет элемент, который обладает смесью признаков блочного и строчного элементов. По отношению к соседним внешним элементам такой элемент расценивается как строчный. То есть он не отделяется от соседних элементов переводом строки. Однако по отношению к вложенным элементам он рассматривается как блочный. И к такому элементу применяются свойства width , height , margin .
Проехав с полверсты в хвосте колонны, он остановился
Проехав с полверсты в хвосте колонны, он остановился
Первый элемент span является строчным, у него значение inline , поэтому для него бессмысленно применять свойства width и height . А вот второй элемент span имеет значение inline-block , поэтому к нему жуе применяются и ширина, и высота, и при необходимости еще можно установить отступы.
run-in
Значение run-in определяет элемент, который зависит от соседних элементов. И здесь есть три возможных варианта:
Элемент окружен блочными элементами, тогда фактически он имеет стиль display: block , то есть сам становится блочным
Элемент окружен строчными элементами, тогда фактически он имеет стиль display: inline , то есть сам становится строчным
Во всех остальных случаях элемент считается блочным
Табличное представление
Значение table по сути превращает элемент в таблицу. Посмотрим на примере списка:
- Item 1
- Item 2
- Item 3
Здесь список превращается в таблицу, а каждый элемент списка - в отдельную ячейку. Для этого у элемента списка устанавливается стиль display: table-cell . Фактически вместо этого списка мы могли бы использовать стандартную таблицу.
Сокрытие элемента
Значение none позволяет скрыть элемент, которого как-будто нет на веб-странице:
Первый параграф
Второй параграф
Третий параграф
Разрешите представить вам перевод статьи «Cross-Browser Inline-Block», написанной Райном Доэрти холодным февралем 2009 года. В статье рассказывается о верстке элементов списка с установкой для свойства display значения inline-block . Статья об этом, а также о трудностях, возникающих в процессе достижения результата и о методах их «лечения».
Inline-block , заманчивое значение для свойства display , которое обещает очень много, а выполняет совсем мало. Очень часто я получал PSD-файлы, подобные этому:
И плакал.
Обычно такой способ отображения не вызывает проблем. Фиксированная ширина, фиксированная высота, float: left и готово. Если бы не одно, но! Дизайн должен отображаться корректно при любом количестве содержимого. В нашем случае, если в одном из блоков окажется чуть больше данных, то он «сломает» всю сетку.
Так как первый элемент выше следующих, пятый становится не под ним, как нам того хотелось бы, а «обтекает» по правому краю. В общем, нам необходима эластичность таблицы, но в правильной, семантичной верстке.
Начнем с простого примера, где у пунктов списка для свойства display установлено значение inline-block :
-
This is awesome
...
- выравнивается с базовой линией родительского элемента
- . Это просто текстовый узел, находящийся непосредственно в
- дополнительным
-
This is awesome
- будут выводиться на экран так, будто используют значение inline-block . Как? Будем использовать hasLayout , волшебное свойство IE, делающее доступными многие манипуляции. Вы не можете явно указать для элемента hasLayout: true или сделать это каким-либо подобным простым образом, однако можете запустить механизм, указав zoom: 1 .
- , то научим IE 7 отображать их совсем как inline-block :
- с нужной высотой. Если же содержимое превысит указанную величину, то просто растянет свой контейнер. Все остальные браузеры проигнорируют _height .
-
This is awesome
- Первый пункт
- Второй пункт
- Третий пункт
- block - блочный элемент (автоматически создает перевод строки)
- inline - встроенный элемент (не создает перевода строки);
- inline-block - производная от inline. Он также не создает перевода строки, но элементу можно задать ширину и высоту;
- list-item - блочный элемент с маркером списка;
- run-in - устанавливает элемент как блочный или встроенный в зависимости от контекста;
- table
- равносильно таблице (тег
), с переносом строки;
- inline-table - производная от table. Элемент является встроенным, но соседние элементы его обтекают;
- table-caption - создания заголовка таблицы (аналог тега
); - table-cell - создания элемента ячейки таблицы (аналог тега
); - table-column - элемент определяющий столбец таблицы;
- table-row - элемент определяющий строку таблицы;
- none - элемент не отображается на странице и все другие элементы ведут себя так, как будто его нет вообще;
- inherit - наследование от элемента родителя;
Примечание
По умолчанию все элементы являются строчными display :inlineПримеры использования Display
Пример №1. Использование display:block
Как видите, строка перенеслась автоматически
В примере добавлено свойство border:1px solid #000 чтобы показать, какую область занимает блочный элемент.
Абзац №1. Рассматриваем элементы display. текст со свойством display:block Как видите, строка перенеслась автоматически
Пример №2. Использование display:none
Вот как это выглядит на странице:
Абзац №1. Рассматриваем элементы display:none. текст со свойством display:none Как видите, блок с текстом none отсутствует
Логично провести ассоциацию с атрибутом visibility: hidden , но в отличии от него, display:none не отводит места под объекты.
Это свойство является очень полезным, например, при создании эффектов выпадающего меню.
Пример №3. Использование display:inline-block
Как видите, блок с текстом none отсутствует
Вот как это выглядит на странице:
Абзац №1. Рассматриваем элементы. текст со свойством display:inline-block Как видите, блок вставлен прямо в контент
Результат выглядит корректно в Firefox 3, Safari 3 и в Opera:
Кажется, будто что-то не так с вертикальным выравниванием. Говоря по правде, никаких ошибок нет, это как раз корректное поведение браузера, но совсем не тот результат, которого мы бы хотели.
А происходит здесь следующее, базовая линия (baseline) каждого элемента
. Вы спросите, что такое базовая линия? Лучше один раз увидеть, чем сто раз услышать:
Базовая линия на рисунке выше обозначена линией, идущей через основание символов. Значением по-умолчанию для свойства vertical-align у inline и inline-block элементов является baseline . Это значит, что базовая линия элементов выравнивается с базовой линией родителя. На рисунке ниже представлен пример такого выравнивания:
Как видите, каждая базовая линия блоков на рисунке выше выравнена по базовой линии текста «This is the baseline», который не является элементом
, помещенный туда в качестве индикатора расположения базовой линии элемента
.
Получить желаемый изначально вариант выравнивания довольно просто, достаточно для свойства vertical-align указать значение top и получить в результате отличную сетку:
Вот только это не работает в Firefox 2, IE 6 и 7:
Для начала займемся Firefox 2.
Firefox 2 не поддерживает значение inline-block , зато отлично понимает специфичное для Мозиллы значение -moz-inline-stack для свойства display . Оно приводит к результатам, подобным действию inline-block . Когда мы добавляем его перед display: inline-block , то Firefox 2 игнорирует вышеуказанное, так как не понимает его, и использует -moz-inline-stack . Другие браузеры используют inline-block , игнорируя непонятное для них -moz-inline-stack .
К сожалению, это вызывает небольшой баг:
Честно, я не знаю, что является его причиной. К счастью, лечится он довольно просто обертыванием всего содержимого элемента Теперь перейдем к IE 7. Он тоже не поддерживает inline-block
, но мы можем использовать трюк, благодаря которому элементы Технически элементы с hasLayout
, установленным в значение true
сами отвечают за рендеринг самих себя и дочерних элементов. Объедините это с min-height
и width
, и получите результат, очень близкий к display: block
. Это как магический порошок, заставляющий исчезать все появляющиеся при отображении проблемы. Когда мы добавим zoom: 1
и *display: inline
(звездочка является хаком для IE 6 и IE 7) для элементов
Почти готово. Остался лишь IE 6: IE 6 не поддерживает min-height
, но взамен мы можем использовать его неверное обращение к свойству height
. Установим для _height
(обратите внимание на подчеркивание спереди) значение в 250px
и получим все элементы Финальный CSS и HTML выглядит так:
Здравствуйте, уважаемые читатели блога сайт! Настала очередь поговорить о таком важном правиле CSS как display. Основной упор сделаем на наиболее часто используемых параметрах этого свойства - block, inline и none
. Естественно, все это будет рассмотрено на живых примерах, куда же без этого. Данное средство каскадных таблиц стилей дает возможность без вмешательства в HTML код задавать тип отображения элементов на странице. Я уже писал о том, что наиболее популярные подразделяются на блочные и строчные. Однако, на самом деле типов, определяющих вид того или иного элемента на странице, гораздо больше. Мы разберем на конкретных практических примерах превращение строчных вебэлементов в блочные и в обратном порядке, а также посмотрим, как можно реализовать динамический эффект посредством чистого CSS с помощью display none
без использования скриптов. Кроме этого, попробуем создать списки на основе блочных вэбэлементов, используя list-item. Все эти изыскания имеют вполне конкретную и реальную сферу применения, поэтому такой практикум трудно переоценить. В общем, приступаем. Для придания гибкости при верстке как раз с помощью свойства display, которое имеет достаточно много значений (кроме указанных в начале) можно менять характеристики тех или иных вебэлементов. Для каждого тега, соответствующего конкретному элементу, даны начальные значения по умолчанию. Подробная информация по этому вопросу предоставлена на специальной странице валидатора W3C (Default style sheet for HTML 4). Скажем, здесь целый список HTML тегов, которым соответствует значение block: Кстати, если display вообще не указан, то для конкретного тега будет применено именно дефолтное значение. В этом случае при необходимости изменить вид HTML вебэлемента следует просто прописать ему нужный параметр display. Это еще раз подтверждает тесную связь между языком гипертекстовой разметки и каскадными таблицами стилей. Если мы посмотрим на перечень всех значений для свойства дисплей в таблице валидатора W3C , то обнаружим следующее: Здесь перечислены все возможные параметры для дисплей. В том случае, если не указано конкретное значение, по умолчанию будет действовать display inline, что соответствует тегу строки. Потому на странице спецификации «Defolt style sheet for HTML 4» теги, которые по умолчанию являются строчными, вообще отсутствуют в списке. Как вы помните, в общем случае CSS правила дают команду браузеру, как отображать тот или иной вебэлемент. Скажем, для блочных и строчных это выглядит так: display:block и display:inline соответственно. Однако, присвоенные (в том числе дефолтные) значения свойства дисплей не являются непререкаемой догмой и могут быть изменены. Сейчас и посмотрим, каким образом можно преобразовать блочные в строчные элементы, и наоборот. Возьмем для примера часто встречающиеся при создании вебсайтов теги, для удобства придав каждому цветовой оттенок фона с помощью CSS свойства background:
Текст В итоге данные вэбэлементы отобразятся в браузере в полном соответствии со своими умолчательными параметрами CSS правила дисплей. Вся эта композиция на вебстранице будет иметь такой вид ( можете посмотреть в живую): Заголовок H2 и тег P являются блочными (block), поэтому занимают по ширине всю доступную область. Один из важнейших структурных вебэлементов SPAN - строчный (inline), по этой причине его ширина ограничивается содержанием. Далее пропишем для P правило инлайн:
Текст Теперь в нашем примере произойдут вот такие превращения: Эти изменения вы можете проследить в отдельной вкладке. Как видим, текстовый элемент превратился в строчный и его ширина теперь определяется входящим контентом («Текст»). SPAN занял место в строке рядом с ним, поскольку пространство позволяет. Абсолютно также можно провести обратную операцию и строчный вебэлемент сделать блочным. Применим теперь параметр блок к SPAN:
Тег span После такого редактирования картина будет таковой: Теперь элемент SPAN стал блочным. Это доказывает и его вид, поскольку он стал занимать все возможное пространство по ширине. И снова можете убедиться в корректности всех этих изысканий. Дальше поэкспериментируем немного в области создания , которые, как известно, составляются с помощью тегов UL, OL, LI. Мы же обойдемся без них, применим для выполнения этой задачи лишь правило display:list-item. Для этого возьмем заголовок из предыдущего примера, а также несколько простых абзацев. Но так все-таки не остается видимой области для маркеров. Чтобы решить задачу в полном объеме, требуется задать отступы слева для всех пунктов списка с помощью свойства margin-left, указав ему конкретное значение (например, 25 пикселов):
Текст 1
Текст 2
Текст 3 Результирующий вид окажется таким: Таким образом маркированный список готов . При необходимости вид самих маркеров можно настроить как угодно, применив правило CSS list-style. Вполне возможно произвести и обратное действие. То есть при наличии созданного на основе тех же UL и LI списка обратить его в стандартные абзацы, указав block для каждого элемента LI. Как я отметил выше, у свойства CSS дисплей существует еще немало параметров, посредством которых можно, например, оформлять таблицы. Каждому вебэлементу соответствует определенный параметр display: Но подробно расписывать данный аспект я не намерен, поскольку эта тема требует отдельной публикации, да и применяются данные значения весьма редко, не говоря уже о том, что даже популярные браузеры воспринимают табличные CSS правила по-разному, особенно это касается старых версий . Так что ограничусь пока общей информацией. Наверное, вы уже в курсе, что , причем любого, в обязательном порядке содержит тег HEAD, в содержание которого включена служебная информация, которая не видна на странице. Если мы вернемся к странице дефолтных параметров для HTML элементов, то увидим, что none является значением по умолчанию как раз для HEAD: То есть, ежели конкретный вебэлемент обладает свойством display none, то он не только не будет виден на странице и никоим образом не повлияет на другие составляющие документа. Под него не будет даже резервироваться место при генерировании кода вебстраницы. Для примера возьмем два заголовка H2, одному из которых присвоим правило дисплей со значением none. На полученный результат посмотрите сами: Чтобы наглядно увидеть, как работает это CSS правило, попробуйте удалить: Class1 {display:none;}
После этого оба заголовка будут видны. Понятно, что тег HEAD является одним из важнейших и системообразующих в HTML коде, но он и так не требует никакого вмешательства, поскольку для него предусмотрено значение none свойства дисплей по умолчанию. В каких же еще случаях возможно применение этого параметра? Ну, значение none есть смысл применять только при желании реализовать какие-то динамические эффекты на вебстранице без привлечения скриптов. Скажем, когда при определенных действиях элемент появляется в зоне видимости. Возьмем пример выпадающего меню в упрощенном варианте. Заключим H3 и UL в общий контейнер DIV. Полностью конструкция будет такой:
Далее надо указать стили для DIV через заданный class (), чтобы получить желаемый результат. Пропишем none к свойству дисплей, этим мы скроем меню из зоны видимости. А вот для того, чтобы обеспечить появление списка при подводе курсора мыши к заголовку, нужно еще воспользоваться помощью псевдокласса:hover (об этом будет отдельная статья), которому определим параметр свойства дисплей block: Class1 ul {display:none;}
.class1:hover ul{display:block;}
Конечно, можно более внимательно отнестись к оформлению элементов посредством добавления других стилевых правил. Однако, я намеренно не буду сейчас этого делать, чтобы не засорять CSS код и не отвлекать от сути вопроса. Теперь, если подвести курсор мышки к заголовку, то появится наш маркированный список: Впрочем, если вы что-то упустили или не до конца поняли, можете онлайн , чтобы удалить темные пятна. Что еще? Ах, да. Есть такой параметр как display:inline-block
. Он придает тегу одновременно свойства блочного и строчного элемента. Если по отношению к соседним вебэлементам он будет вести себя в качестве строчного (рядом с ним могут находиться другие теги в строку), то для вложенных в него элементов он будет блочным (возможность определять его размеры и отступы). Вопрос практического использования inline-block достаточно неординарный и требует отдельного внимания, что явно не укладывается в рамки настоящей статьи. Поэтому на данный момент ограничимся общей информацией. Каковым же может быть резюме настоящей статьи. Главное преимущество применения свойства дисплей заключается в том, что мы можем менять виды отображения элементов на странице, не прибегая к правке HTML кода. На вебстранице вполне может быть огромное число самых разнообразных тегов, поэтому это занятие может оказаться довольно трудоёмким. Вот здесь и выручит правило дисплей, значения которого можно прописать через файл стилей CSS, что и сэкономит драгоценное время. Здравствуйте, уважаемые читатели блога сайт. Сегодня мы поговорим про довольное важное правило языка стилевой разметки под названием Display. Самые часто используемые его значения вы уже, наверное, встречали в CSS коде: display block, none или inline
. В этой статье мы попробует рассмотреть все это подробнее и на примерах. По сути, оно позволяет задавать и при необходимости менять способы отображения тех или иных элементов Html кода. С помощью него блочные элементы можно будет сделать строчными или даже списком, а также используя display:none можно реализовывать динамику на вебстранице, например, создавать выпадающие меню без использования скриптов
на чистом CSS. Как мы с вами уже узнали из курса по языку Html, на веб страницах формируются элементы с помощью тегов, которые в свою очередь обрабатывает парсер Html используемого вами браузера и отображает их на экране вашего компьютера. То, как будут выглядеть эти элементы (созданные на основе Html тегов), определяется в современной языком стилевой разметки CSS. Даже если вы никаких специальных стилей не задавали для каких-либо тегов, то они все равно будут отображаться браузером с учетом тех правил, которые были приняты для них по умолчанию. Где же можно посмотреть на эти самые CSS стили по умолчанию для всех Html тегов
? Ну, все в том же на этой странице . Если прокрутить ее оглавление до конца, то там вы увидите ссылку « », где и будет приведена нужная нам информация. К чему все это? Я уже неоднократно при описании тех или иных Html тегов акцентировал ваше внимание на том, к какому именно типу относится этот тег — строчный или же блочный
. В зависимости от этого мы предполагали наличие определенного поведения у данных элементов — либо они будут стремиться занять все доступное им место по ширине (блочные), либо не будут (строчные). Но я так и не объяснил откуда берется такое разделение и где можно узнать к какому именно типу относится конкретный тег. Так вот, узнать это как раз можно на упомянутой нами странице спецификации CSS под названием «Default style sheet for HTML 4 » и отвечает за все это безобразие специальное правило Display. Например, там в самом начале перечислены все элементы, которые относятся к блочным и происходит это из-за того, что на них действует правило display:block
: Здесь вы можете увидеть все те же теги , контейнеров и других блочных элементов. Если посмотреть на список CSS свойств и допустимых для них значений в валидаторе W3C, то для display мы увидим следующее: Если не указано другого, то по умолчанию будет использоваться вариант «display:inline» (т.к. именно это значение прописано в столбце «Initial value»), что будет соответствовать формированию строчных элементов. Поэтому в приведенной на странице спецификации «Default style sheet for HTML 4 » те теги, которые должны отображаться как строчные (например, span), вообще не описаны или для них не указано значение Дисплей, ибо по умолчанию они и так будут строчными. Правило Дисплей отвечает за то, как данный элемент надо строить и отображать браузеру. Оно говорит обозревателю, что из себя представляет тег и как его надо показывать. Имеется возможность показывать как элемент строки (display: inline) или как блок (block), показывать как таблицу (table) или как часть таблицы (inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption). Это правило очень важное. Но то, что задано по умолчанию для тегов, вовсе не является величиной постоянной. При желании или возникшей необходимости вы всегда сможете сделать блочный элемент (для которого по умолчанию браузер использовал display: block) строчным и, соответственно, наоборот. Давайте рассмотрим простой пример с тремя тэгами, один из которых по умолчанию будет строчным (span), а два других — блочными (H3 и P). Для большей наглядности я залил область отведенную для этих элементов : P - еще один по умолчанию блочный В результате браузер отобразил все элементы в полном соответствии с их умолчательными значениями правила Display: Как видите, первый блок H3 (с умолчательным значением block) занимает весь доступный ему размер по горизонтали (равно как и третий элемент P), ну а строчный Span (с умолчательным значением display:inline) занимает по ширине ровно столько места, сколько нужно для размещения заключенного в него контента. Ну, а теперь давайте из изначально блочного тега H3 сделаем строчный
с помощью добавления к нему display inline (я уменьшил текст в первых двух элементах для получения большего эффекта наглядности): P - еще один по умолчанию блочный тэг Как вы можете видеть, браузер учел display:inline и теперь элемент заголовка H3 (изначально блочный) уже не занимает все доступное ему по ширине пространство, вследствие чего к нему вплотную оказался прижат следующий за ним строчный тэг Span. Но прижался он к предыдущему не вплотную, а разделенный пробелом. При бытности заголовка H3 блоком этот пробел не учитывался, но после его перерождения в тег строчный, все стоящие в коде были преобразованы в единственный пробел по всем правилам языка гипертекстовой разметки, о которых вы можете почитать по приведенной ссылке. Точно так же можно из строчного тега Span сделать блочный
с помощью добавления display:block: P - еще один по умолчанию блочный Html элемент И в результате наше наглядное пособие отобразит произошедшую : Span стал занимать всю область,доступную ему по ширине в не зависимости от количества контента заключенного в этот тэг. А теперь давайте попробуем с помощью Дисплей сделать ряд блочных тегов элементами списка. С этим нам поможет справиться правило display:list-item
. Пусть у нас изначально будут присутствовать несколько абзацев и заголовок: Первый абзац (тег P)
Второй абзац
Третий Которые будут выглядеть примерно так: Теперь, если мы добавим ко всем блочным тэгам абзаца CSS правило display:list-item, то браузер сгенерирует для всех этих элементов специальную область для маркера, в которых появятся эти самые маркеры используемые по умолчанию: Первый абзац (тег P) Второй абзац Третий Но в таком виде вы никаких изменений не заметите. Область маркера добавляется перед областью блочного тега и чтобы ее увидеть, нужно каким-либо образом отодвинуть этот блок слева от края контейнера, в котором он живет. Сделать это можно с помощью все того же , а именно прописав для нужных абзацев margin-left:20px (или заключив абзацы, например, в ) и тогда получим следующую картину: Получается, что с помощью правила Display можно в любой момент поменять уже имеющиеся в Html коде элементы на другие (просто изменив способ их отображения на вебстранице), при этом не меняя эти самые теги. Дело в том, что тэгов в коде может быть очень много и менять их все вручную будет затруднительно, а вот с помощью Дисплей это можно будет сделать в несколько кликов через внешний файл таблиц каскадных стилей, что очень удобно. Удачи вам! До скорых встреч на страницах блога сайт Вам может быть интересно Свойство CSS Display
нужен для установки типа html элемента относительно других элементов. Проще говоря это опция отвечает за то, как отображать элемент относительно других. Благодаря ему можно добиваться нужных "спецэффектов". Синтаксис CSS Display
Где value
может принимать значения:
Как превратить блочный тег в строчный и наоборот с помощью display inline и block
Заголовок
Display list-item - делаем списки из блочных элементов
Заголовок
Правила display none и inline-block - для чего они нужны
Выпадающий список
Display block и inline — как блочный сделать строчным
H3 по умолчанию будет отображать браузером как блочный
Span - типичный пример строчного тега
H3
Span
H3
Span
Display list-item — создание списков на основе блочных тегов
H3
H3
посмотреть еще ролики можно перейдя на
");">
Float и clear в CSS - инструменты блочной верстки
Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
Height, width и overflow - CSS правила для описания области контента при блочной верстке
CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html
display
: value
;