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

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

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

Не реагируют на 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;.

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

Вход

Регистрация

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