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

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

На этой странице:

Свойства для создания внутренних отступов с одной стороны
Интегрированное свойство для создания внутренних отступов
Внутренние отступы строчных элементов

Свойства для создания внутренних отступов с одной стороны

`padding-top`, `padding-right`, `padding-bottom`, `padding-left`
Значения:	<размер> \| <процент> \| `inherit`
По умолчанию:	0
Область применения:	все элементы
Наследование:	нет
Проценты:	относительно ширины блока-контейнера
Примечание:	внутренние отступы не могут быть отрицательными

По умолчанию у элементов нет внутренних отступов. Разделение между абзацами, например, традиционно обеспечивается полями (внешними отступами).

Фон элемента распространяется на внутренние отступы и рамку.

Внутренние отступы, в отличие от внешних, не сворачиваются.

Рассмотрим пример, который поясняет сказанное.

Файл style.css

  
P    
{ 
  background:#ffbf00; 
  margin:1em 0;
}
P.three
{
  border:2px dashed;
  margin:0;
}
P.four
{
  border:2px solid;
  margin:0;
  padding-top:1em;
  padding-bottom:1em;
}

Для всех абзацев задан фон и внешний отступ по вертикали 1em. Для третьего и четвёртого — внешние отступы обнулены и заданы рамки. Для четвёртого абзаца дополнительно заданы внутренние отступы сверху и снизу.

Файл index.htm

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

Внутренние отступы заданы только для четвёртого абзаца. Видим, что фон элемента распространяется на внутренние отступы и рамку.

Третий и четвёртый элемент соприкоснулись рамками, так как между ними нет внешнего отступа.

Интегрированное свойство для создания внутренних отступов

`padding`
Значения:	<размер> \| <процент> \| `inherit` правило четырёх сторон
По умолчанию:	не определено
Область применения:	все элементы
Наследование:	нет
Проценты:	относительно ширины блока-контейнера

В качестве примера построим CSS-правила для оформления определений. Будем выделять определения рамкой, и выводить текст на светло-жёлтый фон.

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

Файл style.css

  
.ext    
{ 
  border:1px dotted red;
  background:#ffc;
}
.def    
{ 
  border:1px dotted red;
  background:#ffc;
  padding: 0.5em;
}

В абзаце с классом ext внутренние отступы не предусмотрены — текст слишком тесно прижимается к рамке. С классом def — всё в порядке.

Файл index.htm

Внутренние отступы строчных элементов

Внутренние отступы строчных незамещаемых элементов ведут себя так же, как рамки — по горизонтали они освобождают пространство, а по вертикали — нет. При этом фон отступа перекрывает вышележащую строку, а содержимое нижележащей выводится поверх него. Такое поведение объясняется порядком построения строк на экране.

На строчных замещаемых элементах поведение внутренних отступов не отличается от их поведения на блоках (то есть они увеличивают размер строки).

Файл style.css

  
EM    
{ 
  background:#ffc;
  border: 4px solid red;
  padding:1em;
}

Файл index.htm