Тег | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.
Синтаксис
<div>...</div>
Атрибуты
- align
- Задает выравнивание содержимого тега <div>.
- title
- Добавляет всплывающую подсказку к содержимому.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег DIV</title> <style type="text/css"> .block1 { width: 200px; background: #ccc; padding: 5px; padding-right: 20px; border: solid 1px black; float: left; } .block2 { width: 200px; background: #fc0; padding: 5px; border: solid 1px black; float: left; position: relative; top: 40px; left: -70px; } </style> </head> <body> <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div> <div>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> </body> </html>
Результат данного примера показан на рис. 1.
: Элемент разделения контента — HTML
Элемент разделения контента HTML (<div>
) является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS.
The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Являясь «чистым» контейнером, элемент <div>
, по существу, не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты class
или id
, помечать раздел документа, написанный на разных языках (используя атрибут lang
), и так далее.
К этому элементу применимы глобальные атрибуты.
Заметка: Атрибут align
устарел и вышел из употребления; не используйте его больше. Вместо этого, вам следует использовать свойства CSS или методы, такие как CSS Grid или CSS Flexbox для выравнивания и изменения положения элементов
на странице.
- Элемент
<div>
следует использовать только в том случае, если никакой другой семантический элемент (такой как<article>
или<nav>
) не подходит.
Простой пример
<div>
<p>Любой тип контента. Например,
<p>, <table>. Все что угодно!</p>
</div>
Результат будет выглядеть так:
Стилизованный пример
Этот пример создаёт прямоугольник с тенью, применяя стили к <div>
с помощью CSS. Заметьте, что использование атрибута class
на элементе <div>
"shadowbox"
(в дословном переводе означает «теневая коробка») к элементу.HTML
<div>
<p>Вот очень интересная заметка в прекрасном прямоугольнике с тенью.</p>
</div>
CSS
.shadowbox {
width: 15em;
border: 1px solid #333;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
Результат
BCD tables only load in the browser
HTML тег
Тег <div> — пустой контейнер, который определяет разделение или раздел. Он не влияет на контент или макет и используется для группировки HTML-элементов, которые должны быть написаны с помощью CSS или с помощью скриптов.
Мы рекомендуем использовать тег только в случае, когда нецелесообразно использовать семантические элементы HTML5, такие как <nav> , <main> или <article>.Тег <div> является блочным элементом, поэтому разрыв строки помещается до и после него.
Вы можете поместить любой элемент HTML в тег <div>, включая другой тег <div>.
Тег не может быть дочерним элементом <p>, так как параграф будет разорван в месте включения тега .Для применения стилей внутри параграфа используется тег <span>.
Синтакс
Тег <div> — парный, состоит из двух частей, открывающего (<div>) и закрывающего (</div>) тегов.
Пример¶
Попробуйте сами!<!DOCTYPE html> <html> <head> <title>Использование тега <div></title> </head> <body> <h2> Тег <div> </h2> <div> <p> Мы использовали тег <div>, чтобы сгруппировать два параграфа и добавить фон к тексту, а для того, чтобы изменить цвет <span> этого слова</span> мы использовали тег <span>.</p> <p> Обратите внимание, что тег <div> является блочным элементом, до и после него добавляется разрыв строки.</p> </div> </body> </html>
Результат¶
Расположение блоков <div>¶
При верстке HTML страниц с помощью слоев тег <div> является ее базовым фундаментом, так как именно этот тег определяет многочисленные структурные блоки веб-страницы.
Для корректного отображения блоков на странице необходимо их правильно расположить. Различают несколько способов расположения блоков в зависимости от целей и контента страницы. Давайте рассмотрим несколько из них.
Флексбокс
Спецификация CSS Flexible Box успешно пришла на замену верстке float-ами. Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.
Пример¶
Попробуйте сами!<!DOCTYPE html> <html> <head> <title>Заголовок документа</title> <style> .flex-container { display: flex; align-items: center; width: 90%; height: 300px; background-color: #1c87c9; } .flex-container > div { width: 25%; padding: 5px 0; margin: 5px; background-color: lightgrey; text-align: center; font-size: 35px; } </style> </head> <body> <div> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>
Результат¶
CSS свойство float
CSS свойство float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. С помощью свойства float можно размещать элементы по горизонтали рядом друг с другом, что позволяет верстать типовые фрагменты веб-страниц, вроде врезок, горизонтальных меню, каталога товаров, колонок и др.
Пример¶
Попробуйте сами!<!DOCTYPE html> <html> <head> <title>Заголовок страницы</title> <style> .content { overflow: auto; border: 3px solid #666666; } .content div { padding: 10px; } .content a { color: darkblue; } .blue { float: right; width: 45%; background: #1c87c9; } .green { float: left; width: 35%; background: #8ebf42; } </style> </head> <body> <div> <div> <p>Параграф в блоке div.</p> <a href="#">Гиперссылка в теге div.</a> <ul> <li>Элемент списка 1</li> <li>Элемент списка 2</li> </ul> </div> <div> <p>Параграф в блоке div.</p> <ol> <li>Элемент списка 1</li> <li>Элемент списка 1</li> </ol> </div> </div> </body> </html>
Результат¶
Отрицательные отступы
Использование отрицательных отступов (negative margins) открывает широкие возможности и позволяет сделать верстку более универсальной.
Пример¶
Попробуйте сами!<!DOCTYPE html> <html> <head> <title>Заголовок окна веб-страницы</title> <style> .content div { padding: 2%; } .content a { color: darkblue; } .main-content { width: 30%; margin-left: 32%; } .blue { width: 25%; margin-top: -10%; background: #1c87c9; } .green { width: 20%; margin: -35% auto auto 70%; background: #8ebf42; } </style> </head> <body> <div> <div> <a href="#">Гиперссылка в теге div.</a> </div> <div> <p>Параграф в теге div.</p> <a href="#">Гиперссылка в теге div.</a> <ul> <li>Элемент списка 1</li> <li>Элемент списка 2</li> </ul> </div> <div> <p>Параграф в теге div.</p> <ol> <li>Элемент списка 1</li> <li>Элемент списка 2</li> </ol> </div> </div> </body> </html>
Результат¶
Позиционирование Relative + absolute positioning
Комбинация разных типов позиционирования для вложенных элементов — один из удобных и практичных приемов верстки. Если для родительского элемента задать position: relative, а для дочернего position: absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.content { position: relative; height: 400px; border: 1px solid #666666;}
.content div { position: absolute; width: 35%; padding: 10px; }
.blue { right: 20px; bottom: 0; background: #1c87c9; }
.green { top: 10px; left: 15px; background: #8ebf42; }
</style>
</head>
<body>
<div>
<div>
<p>Параграф в теге div.</p>
</div>
<div>
<p>Параграф в теге div.</p>
</div>
</div>
</body>
</html>
Попробуйте сами!Результат¶
position: relative не влияет на позиционирование элементов в нормальном потоке, если вы не добавляете смещения.
Атрибуты¶
Тег <div> поддерживает глобальные атрибуты и атрибуты событий.
Как добавить стиль к тегу <div> ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <div>:
Цвет текста внутри тега <div>:
Стили форматирования текста для тега <div>:
Другие свойства для тега <div>:
Поддержка браузера
Тег div
Пример
Раздел документа, который будет иметь светло-голубой цвет фона:
<div>
<h4>This is a heading</h4>
<p>This is a paragraph.</p>
</div>
Определение и использование
Тег <div> определяет деление или раздел в документе HTML.
Элемент <div> часто используется в качестве контейнера для других элементов HTML для их стиля с помощью CSS или для выполнения определенных задач с помощью JavaScript.
Поддержка браузера
Элемент | |||||
---|---|---|---|---|---|
<div> | Да | Да | Да | Да | Да |
Советы и примечания
Совет: Элемент < div > очень часто используется вместе с CSS для компоновки веб-страницы.
Примечание: По умолчанию браузеры всегда размещает разрыв строки до и после элемента <div>. Тем не менее, это может быть изменено с помощью CSS.
Различия между HTML 4,01 и HTML5
Атрибут align не поддерживается в HTML5.
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
align | left right center justify | Не поддерживается в HTML5. Задает выравнивание содержимого внутри элемента <div> |
Глобальные атрибуты
Тег <div> также поддерживает Глобальные атрибуты в HTML.
Атрибуты события
Тег <div> также поддерживает Атрибуты событий в HTML.
Похожие страницы
Учебник по HTML: HTML Blocks
Учебник по HTML: HTML Layout
Ссылка на HTML DOM: Div Object
Параметры CSS по умолчанию
MOST-браузеры будут отображать элемент <div> со следующими значениями по умолчанию:
Пример
div {
display: block;
}
Span и Div
Все в HTML предназначено для того, чтобы придать контенту некое значение. В то время как большинство HTML тегов в полной мере выполняют это предназначение (тег <p> создает параграф, тег <h2> – заголовок и т.д.), тег <span> и тег <div> никакого значения не имеют, что может вызвать некоторые сомнения в необходимости их существования. Однако эти теги используются чрезвычайно активно совместно с технологией CSS.
Они используются для того, чтобы группировать области HTML кода и затем подключать к этой группе определенные стили CSS. Это осуществляется при помощи атрибутов class и id, ассоциирующих данные элементы с селекторами класса или идентификатора CSS.
Разница между тегом <span> и тегом <div> заключается в том, что элемент <span> является строчным и обычно используется для группирования небольших областей строчного HTML кода, а элемент <div> является блоковым (что, грубо говоря, выражается в наличие перевода строки до и после этого элемента) и используется для группирования более крупных областей кода.
<div>
<p>Это <span>здорово</span></p>
</div>
Элементы <div> и особенно <span> не должны использоваться слишком часто. Если есть разумная альтернатива, то всегда следует использовать именно ее. Например, если вам нужно выделить слово «здорово» и шрифт в классе «paper» определен как жирный, то этот код может выглядеть следующим образом:
<div>
<p>Это <strong>здорово</strong></p>
</div>
Если вы еще ничего не знаете о классах и идентификаторах, то не переживайте, все это описано в учебнике «CSS начального уровня». Все что вы сейчас должны запомнить, это то, что элементы <span> и <div> – теги «без значений».
Метатеги Вверх Промежуточные итоги| lesson-web.ru
И последний урок в этом разделе, последний тег, который мы с вами изучим, — это тег «div». На самом деле, этот тег самый важный из тех, что вы изучали до этого. Это самый-самый-самый важный тег. Вот без него – ну никуда. Сейчас всё ложится на плечи тега «div».
Что такое тег «div» на самом деле, физически? Это блок, элемент, объект на странице, называйте его как хотите. Это такое бесформенное создание, которое на самом деле ничего не делает на странице, если вы его просто так написали. Это пустышка некоторая. Но в ней есть маленькое такое волшебство. На самом деле, представьте себе пластилин. Когда вы его достали из коробки он ничего собой не представляет. Это зелёный прямоугольник.
Вот «div» — это такое же бесформенное создание, как и пластилин. Это объект, который имеет ширину 100%, то есть ширину родительского блока и по высоте он 0px, то есть он по высоте ничего не значит.
То есть «div» — этот такая заготовочка, с которой мы можем делать всё, что угодно с помощью CSS. Дальше, мы будем ставить «div-ы» на страницу и задавать им ширину, высоту, фон, рамки, тени и т. д. Это всё с помощью CSS. И постепенно этив «div-ы» обрутут какое-то визуальное обличие. Он может стать кнопкой, он может стать формой, он может стать каким-нибудь текстом, точнее блоком, который будет содержать в себе текст. Всё, что угодно. Всё, что вы видите на страницах сайтов, по большей части сделано с помощью «div’ов». Если вы зайдёте на любой сайт, даже, допустим, на vk.com давайте зайдём, всем, я думаю, известный сайт.
Вот на любой блок кликаем, нажимаем «Посмотреть код», смотрим в исходник: и сразу же на «div» попали, естественно.
Всё «div’ы», «div’ы», «div’ы», всё заполонили «div’ы». И у каждого «div’а» есть свои CSS-свойства. И они обретают какую-то форму, какой-то оттенок с помощью CSS-ок.
Поэтому «div» — это такая заготовочка, которая изначально высотой 0px, а шириной 100%, которая не имеет ни цвета, ни запаха, ни ширины, ни высоты. И дальше этот блок с помощью CSS он начинает обрастать какими-то свойствами. Поэтому в следующем курсе по CSS мы постоянно будем писать «div’ы», «div’ы», «div’ы» и задавать им разные CSS-свойства и понимать, как они работают, поэтому с «div’ом» вы будете работать постоянно, всю жизнь. Ничего сложного, страшного в этом теге нет, просто это такая болваночка, с которой мы можем дальше работать и делать с ней абсолютно всё, что вашей душе захочется. Поэтому доканчивайте этот курс, переходите к CSS и давайте учится задавать свойства нашим «div’чикам».
Изучаем теги div и span
Здравствуй, уважаемый читатель.
Это двенадцатый заключительный урок изучения html, в котором вы узнаете про очень полезные блоки на странице, без которых было бы невозможно работать и верстать шаблоны для сайтов, про теги DIV и SPAN.
Перед прочтением данного урока рекомендую пройти предыдущие уроки:
Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки
Урок 4. Изображения Урок 5. Ссылки. Часть 1 Урок 5. Ссылки. Часть 2 Урок 6. Атрибуты Урок 7. Таблицы Урок 8. Выделения текста Урок 9. Формы. Часть 1 Урок 9. Формы. Часть 2 Урок 10. Метатеги Урок 11. Комментарии
Теория и практика
В основном из данных двух тегов строится вся html страница. После того как вы поймете что можно делать с этими тегами, вы не будете знать как обходились раньше без них. По порядку о каждом из этих тегов.
Тег div
Тег div является блочным элементом, который предназначен для выделения фрагмента документа и затем изменением его содержимого.
В коде html он выглядит следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <title>Главная</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div> <h2>Анкета</h2> </div> <div> <div> <ul> <li>Главная</li> <li>Об авторе</li> <li>Разное</li> </ul> </div> <p>Основной текст</p> </div> <div>Все права защищены.</div> </body> </html> |
Вот так выглядит работа с тегом div. Он очень удобен. Сначала мы заключаем всё в блоки, а затем с помощью стилей(CSS) размещаем блоки как и где хотим.
Тег span
Тег span является строчным элементом, который предназначен для выделения фрагмента текста внутри других тегов, таких как <p>,<table> или <div>.
Пример кода с тегом span:
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Главная</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <p>Оказывается, <span>древние предки</span> человека, как выяснили учёные, питались преимущественно фруктами.</p> <p>Поэтому наш организм изначально <span>приспособлен к употреблению фруктов</span>.</p> </body> </html> |
Данный тег работает следующим образом: вы помещаете в него тот фрагмент текста, который хотите выделить и задаете ему стиль.
Дело в том, что если для данных тегов стили не заданы, то вы не увидите никаких изменений на html странице. Стили задаются для тега div и span через таблицу стилей(CSS). В коде html вы только привязываете определенный стиль в CSS через атрибуты или. Данные атрибуты называются селекторами. Вы поймете как они работают когда начнете проходить уроки по CSS.
Пробуйте всё прописать руками. Тогда вы лучше запомните и будете помнить где и как их применить.
Больше практикуйтесь!
Что такое «Div» в HTML?
Вы можете представить себе веб-страницу в трех основных частях. У вас есть верхний и нижний колонтитулы, а между ними — основная часть. Но, глядя на любую веб-страницу, вы можете увидеть, что тело также состоит из разделов. Скорее всего, там есть раздел для продуктов и услуг, отзывов, членов команды, контактной информации и т. Д.
Каждый из этих разделов, вероятно, выглядит немного иначе. Может у них разные цвета и шрифты. Может быть, у одного есть фон параллакса, а у другого видео фон.Может быть, один состоит из нескольких строк и столбцов и так далее.
Этот вариант стиля возможен из-за элемента разделения содержимого в HTML. Этот элемент, более известный как «div», может разделить вашу веб-страницу на разделы, чтобы вы могли настраивать их таргетинг с помощью уникальных свойств CSS.
В этом посте мы подробно рассмотрим, что это за элемент, для чего он конкретно нужен и почему вы хотите использовать его на своем сайте.
Что такое тег div в HTML?
В HTML тег div является общим контейнером на уровне блока для других элементов.
Давайте посмотрим на несколько ключевых терминов в этом определении.
Во-первых, div — это «общий» контейнер, потому что он не описывает содержимое, которое он содержит. Другие элементы, такие как
Во-вторых, div — это контейнер уровня блока. Чтобы понять, что это означает, давайте сравним div с элементом span, который является встроенным контейнером.Есть несколько ключевых различий между контейнером на уровне блока и встроенным контейнером. Например, div всегда начинается в отдельной строке, а диапазон остается в строке (в строке — понятно?). Div также занимает всю ширину страницы, а диапазон — нет. Это означает, что если у вас есть несколько div подряд, они будут отображаться друг на друге на переднем конце. С другой стороны, пролеты могут существовать бок о бок. Последнее существенное отличие состоит в том, что вы можете определить высоту и ширину div, но не можете определить диапазон.
В-третьих, элементы, которые могут содержаться в div, более конкретно известны как «осязаемое содержимое» или «содержимое потока». Ощутимое содержимое — это в основном любой элемент HTML, содержащий текст или внедренное содержимое, а содержимое потока — это, по сути, любой элемент, используемый в теле документов HTML. Таким образом, элементы привязки, цитаты, аудио, изображения, абзаца и заголовка считаются осязаемым или потоковым содержимым и могут быть помещены в div.
Что делает div?
Тег div технически ничего не делает.Это может помочь организовать HTML-файл в разделы на задней панели, но это не повлияет на то, как эти разделы отображаются на передней панели. Однако это позволяет легко стилизовать эти разделы с помощью CSS.
Чтобы стилизовать эти разделы с помощью CSS, вы должны добавить атрибут class или ID к элементу div. Затем вы воспользуетесь селектором CSS, чтобы применить уникальные свойства стиля к элементам, содержащимся в div.
Прежде чем мы погрузимся в пример с CSS, давайте сначала рассмотрим пример элемента div без стиля.
Вот HTML:
Что делает элемент div?
Это заголовок в элементе div
Это текст в элементе div.
Это текст за пределами элемента div. Обратите внимание, как он выглядит так же, как и другой абзац.
Вот результат на передней панели:
Источник изображения
Теперь, когда вы знаете, что элемент div ничего не делает сам по себе, вам может быть интересно, зачем вы вообще его использовали.Ниже мы рассмотрим несколько вариантов использования.
Зачем использовать div в HTML?
Чаще всего вы будете использовать элемент div для группировки разделов кода, на которые вы хотите настроить таргетинг с помощью CSS. Вы можете стилизовать их так, чтобы они выглядели иначе, чем другие разделы на странице, или расположить их иначе. Вы также можете использовать атрибут div и language, чтобы изменить язык определенного раздела на странице.
Начнем с самого простого примера. Чтобы изменить язык определенного раздела на веб-странице, просто поместите элементы внутри div.Затем добавьте атрибут языка и установите для него нужный язык. Для этой демонстрации я выберу французский язык.
Вот HTML:
Что делает элемент div?
Это заголовок в элементе div
Это текст в элементе div.
Это текст за пределами элемента div.Обратите внимание, как он выглядит так же, как и другой абзац.
Это изменит только язык заголовка и абзаца внутри div. Элементы вне div останутся языком по умолчанию.
Вы начнете тем же способом, чтобы изменить стиль div, но вместо добавления языкового атрибута вы добавите атрибут ID или класса. Затем вы воспользуетесь соответствующим селектором, чтобы добавить нужный CSS.
Давайте посмотрим на пример, когда вы использовали бы div для изменения внешнего вида раздела вашей веб-страницы.Допустим, вы хотите стилизовать определенный заголовок и абзац на странице, а остальные оставить без стиля. Затем вы заключите отдельный заголовок и абзац в элемент div и дадите ему имя класса. Для этой демонстрации мы будем использовать myDiv в качестве имени класса.
Затем в разделе заголовка вашего HTML-документа или во внешней таблице стилей вы можете использовать селектор классов .myDiv и определить любые свойства CSS, которые вы хотите. В этой демонстрации мы будем использовать свойства границы, цвета фона, выравнивания текста и цвета.
Вот код CSS:
.myDiv {
бордюр: начальный размер 5 пикселей # 660066;
цвет фона: # 888888;
выравнивание текста: по центру;
цвет: #FFFFFF;
}
Вот HTML:
Что делает элемент div?
Это заголовок в элементе div
Это текст в элементе div.
Это текст за пределами элемента div. Как и первый заголовок за пределами элемента div, этот абзац не имеет стиля.
Вот результат на передней панели:
Источник изображения
Теперь давайте рассмотрим пример того, как вы использовали бы div для изменения расположения или макета раздела вашей веб-страницы. Вы можете найти этот и многие другие примеры в публикации «Вот разница между Flexbox, CSS Grid и Bootstrap».
Скажем, я хочу создать сетку flexbox с шестью столбцами. Я бы начал с создания шести элементов
Вот HTML:
Контейнер Flexbox
Обратите внимание на то, как гибкие элементы сжимаются и расширяются при изменении размера браузера, но не заполняют весь контейнер, когда область просмотра выходит за пределы определенной точки.
1
2
3
4
5
6
Затем в разделе заголовка моего документа или во внешней таблице стилей я использовал бы селектор классов .flex-container, чтобы сделать контейнер гибким.Установив для свойства display значение flex, я бы указал высоту контейнера, а также цвет фона. Чтобы стилизовать элементы гибкости в контейнере, я бы использовал селектор .flex-container> div.
Вот код CSS:
.flex-контейнер {
дисплей: гибкий;
высота: 250 пикселей;
цвет фона: серый;
}
.flex-контейнер> div {
цвет фона: # f1f1f1;
ширина: 100 пикселей;
маржа: 10 пикселей;
выравнивание текста: по центру;
высота строки: 60 пикселей;
размер шрифта: 48 пикселей;
}
Вот результат:
Источник изображения
Где тег
Div помещаются в основной раздел HTML-файла.Это четко обозначено тегами
.Чтобы создать элемент div, вы должны использовать открывающий и закрывающий теги. Вы можете разместить элементы, которые хотите сгруппировать, внутри этих тегов. Часто они будут иметь отступ, как показано ниже.
Это заголовок в элементе div
Это текст в элементе div.
Разделение вашего HTML
Div являются одними из наиболее часто используемых элементов в HTML.Хотя он имеет несколько целей, его основная задача — группировать элементы HTML, чтобы вы могли стилизовать их с помощью CSS. Это делает элемент div полезным для настройки вашего веб-сайта так, чтобы он выглядел именно так, как вы хотите. Самое приятное то, что им легко пользоваться.
HTML-тег div — использование, атрибуты, примеры
Тег