Теория
Теория

Блочная модель и строчные элементы

Еще раз акцентируем внимание на особенности поведения строчных элементов в блочной модели:

Не реагируют на CSS-свойства width и height.
Частично реагируют на margin, воспринимая только горизонтальные отступы.
Частично реагируют на padding, воспринимая только горизонтальные отступы.
При задании вертикальных padding визуально увеличиваются, но без увеличения занимаемого места (не отталкивают другие элементы).
Воспринимают рамки. Аналогично padding рамки сверху и снизу не увеличивают занимаемое элементом место.

После выполнения задания обратите внимание на то, что расстояние между строк в абзацах не увеличилось, хотя элементы визуально стали выше.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Блочная модель и строчные элементы</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> Строчные элементы воспринимают лишь часть свойств блочной модели. В частности, они не реагируют на ширину и высоту, но частично реагируют на отступы, а рамки воспринимают отлично. Горизонтальные рамки и отступы увеличивают размер строчных элементов, а вертикальные визуально увеличивают размер, но не занимаемое элементом пространство. </body> </html>

CSS

body { padding: 0 20px; } p { padding: 5px; } em { border-width: 0; border-style: solid; border-color: #6a6a6a; }

ЗадачиВыполнено

Для тега em задайте следующие свойства:

padding: 10px;,
margin: 10px;,
border-width: 3px;.

Блочная модель и строчные элементы

Вход

Регистрация

Восстановление доступа