Блочная модель документа / Блочная модель и строчные элементы [12/23]
×

Блочная модель и строчные элементы [12/23]

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

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

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

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Блочная модель и строчные элементы</title> <link rel="stylesheet" href="/assets/course9/style1.css"> </head> <body> <p><em>Строчные элементы</em> воспринимают лишь часть свойств <em>блочной модели</em>. В частности, они не реагируют на <em>ширину</em> и <em>высоту</em>, но частично реагируют на <em>отступы</em>, а <em>рамки</em> воспринимают отлично.</p> <p>Горизонтальные рамки и отступы увеличивают размер <em>строчных элементов</em>, а вертикальные визуально увеличивают размер, но не занимаемое элементом пространство.</p> </body> </html>
CSS
body { padding: 0 20px; } p { padding: 5px; }
HTML Academy

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

  1. padding: 10px;,
  2. margin: 10px;,
  3. border-width: 3px;.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.