Создайте веб-страницу с тремя абзацами. Примените разные стили отступов к каждому абзацу с помощью CSS-классов:

Условие

Создайте веб-страницу с тремя абзацами. Примените разные стили отступов к каждому абзацу с помощью CSS-классов:

• Первый абзац должен иметь отступы: 20px сверху, 15px справа, 5px снизу и 10px слева.
• Второй абзац должен иметь отступы: 20px сверху и снизу, и 5px справа и 10px слева.
• Третий абзац должен иметь отступы: 5px сверху и снизу, и 10px справа и слева.

Ответ

Четыре значения margin задаются по часовой стрелке: сверху, справа, снизу, слева. Два значения означают вертикальные и горизонтальные отступы.

<!doctype html>
<html lang="ru">
<meta charset="utf-8">
<title>Отступы абзацев</title>
<style>
  .first  { margin: 20px 15px 5px 10px; }
  .second { margin: 20px 5px 20px 10px; }
  .third  { margin: 5px 10px; }
</style>
<p class="first">Первый абзац</p>
<p class="second">Второй абзац</p>
<p class="third">Третий абзац</p>
</html>

Здесь речь о внешних отступах. Если нужны внутренние, применяют те же значения к padding. У соседних блочных элементов вертикальные margin могут схлопываться, поэтому видимое расстояние между ними не всегда равно сумме двух отступов.