css-ramki

Отступы и рамки CSS

Рассмотрим некоторый документ. На нем сформированы (отображены на экране в браузере) html-элементы. Они формируются на основании тегов. Вы расставляете теги, их обрабатывает парсер html (есть в любом браузере) и строит html-элементы. И как будут выглядеть эти элементы, определяет CSS.

Отступы и рамки

У всех html-элементов есть 4 области: область внешних отступов, рамка, внутренние отступы и содержание элемента. Для чего они нужны?

  • Внешние отступы (margin) — нужны, чтобы регулировать взаимодействие этого элемента с границами других элементов.
  • Внутренние отступы (padding) — это расстояние от рамки до содержания данного элемента.
  • Содержание самого элемента. Тут и так понятно. Если есть вложенные элементы, то они в этой области и находятся.
  • Рамка (border). Очерчивает границы элемента. Схематично 4 области можно представить так:

рамки в css

Следует понимать, что каждый элемент лежит внутри какой-то области. Эта область для элемента, который лежит внутри нее, называется контейнером. Т.е. контейнер — это область контента родительского элемента. Эта область и определяет пространство для построения внутреннего элемента. Значит внутренний элемент будет подстраиваться под размер этой области.

Внешние отступы

Это когда наш элемент взаимодействует с границами контейнера и с границами соседних элементов (те, которые в коде расположены рядом с ним). Основные правила:

  • margin-top: auto|величина|% — отступ сверху.
  • margin-right: auto|величина|% — отступ справа.
  • margin-bottom: auto|величина|% — отступ снизу.
  • margin-left: auto|величина|% — отступ слева.
  • margin: margin-top margin-right margin-bottom margin-left — сборное правило.

Значение «auto» — значит самостоятельный разбор браузером этих величин. Размер отступа можно указать в величинах: em, ex, px. Проценты (%) считаются от ширины контейнера (от области контента родительского элемента). Если указать отрицательное значение, то границы элементов внутри родительского контейнера наедут друг на друга.

Правило «margin» — сборное, здесь указываются значения всех 4-х отступов (начиная сверху и по часовой стрелке). Примеры:

margin:10px 20px 20px 30px;
margin:10px 20px 30px; - отступ слева справа одинаков
margin:10px 20px; - отступ сверху-снизу и слева-справа одинаков
margin:10px; - все отступы одинаковы

Внутренние отступы

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

  • padding-top: величина|%.
  • padding-right: величина|%.
  • padding-bottom: величина|%.
  • padding-left: величина|%.
  • padding: padding-top padding-right padding-bottom padding-left — сборное правило. По аналогии с «margin».

Рамки в CSS

У всех рамок есть следующие характеристики:

  • Толщина — border-width: величина (thin|medium|thick). По умолчанию — medium.
  • Цвет — border-color: цвет. По умолчанию — цвет шрифта в этом элементе.
  • Тип — border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset. Типы: нет рамки | точками | пунктиром | сплошная | двойная | имитация рельефа.

Сами правила рамки:

  • border-top- (width|color|style).
  • border-right- (width|color|style).
  • border-bottom- (width|color|style).
  • border-left- (width|color|style).
  • border: border-width border-style border-color. Сборное правило.



Добавить комментарий

Ваш e-mail не будет опубликован.