Оглавление

Задание внешних и внутренних отступов с помощью CSS

Чем отличаются свойства margin и padding и в чем выражается результат их использования?

 

Решение
Свойство margin добавляет пустое пространство за пределами элемента. Такой внешний отступ можно задавать независимо с каждой стороны:

margin-top: 1em;
margin-right: 2em;
margin-bottom: 0.5em;
margin-left: 3em;


То же самое можно записать в сокращенной форме: 

margin: 1em 2em 0.5em 3em;

 

Если отступы со всех сторон одинаковы, можно использовать следующее простое правило: 

margin: 1em  ;

 
В результате его применения отступ между границей элемента и другими элементами составит 1em.

 

На рис. 9.2 показан вид блочного элемента после добавления к нему внешних отступов.

Код документа таков:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  <head>
    <title>Отступы</title>
    <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
    <style type="text/css">
      p {
        background-color: #CFEAFA;
        border: 2px solid #6CB5DF;
      }
      p.margintest {
        margin: 40px;
      }
    </style>
  </head>
  <body>
    <p>В том параграфе для отступов по умолчанию использованы стили браузера. 
       Фон и цвет указаны в стилях страницы для наилучшего отображения границ блока.</p>
    <p>В этом параграфе для отступов так же использованы стили браузера. 
       Данный параграф добавлен для того, что бы мы увидели размер между блоками </p>
    <p class="margintest">У этого параграфа использован отступ 40px. 
       Данный отступ создает дополнительное пространство за границей блока </p>
  </body>
</html>

 

Добавление к элементу внешних отступов с помощью CSS

Рис. 9.2. Добавление к элементу внешних отступов с помощью CSS

 

Свойство padding добавляет отступы внутри элемента – между его границей и дочерними элементами. Внутренние отступы можно задавать по отдельности с каждой стороны:

padding-top: 1em;
padding-right: 1.5em;
padding-bottom: 0.5em;
padding-left: 2em;


То же самое можно записать в сокращенной форме: 

padding: 1em 1.5em 0.5em 2em;

 
Как и при использовании свойства margin, если внутренние отступы со
всех сторон одинаковы, можно использовать следующее простое пра-
вило: 

padding: 1em;


На рис. 9.3 показан вид блочного элемента после добавления к нему внутренних отступов. Код документа представлен ниже. Сравните его с документом, изображенным на рис. 9.2, – разница между свойствами margin и padding очевидна.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  <head>
    <title>Padding</title>
    <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
    <style type="text/css">
      p {
        background-color: #CFEAFA;
        border: 2px solid #6CB5DF;
      }
      p.paddingtest {
        padding: 40px;
      }
    </style>
  </head>
  <body>
    <p>В том параграфе для отступов по умолчанию использованы стили браузера. 
	   Фон и цвет указаны в стилях страницы для наилучшего отображения границ блока.</p>
    <p>В этом параграфе для отступов так же использованы стили браузера. 
	   Данный параграф добавлен для того, что бы мы увидели отступы по умолчанию </p>
    <p class="paddingtest">У этого параграфа использован внутренний отступ 40px. 
	   Данный отступ создает дополнительное пространство внутри блока </p>
  </body>
</html>

 

Добавление элементу внутренних отступов с помощью CSS

Рис. 9.3. Добавление элементу внутренних отступов с помощью CSS

 

Обсуждение
Приведенное решение наглядно демонстрирует назначение свойств margin и padding. Как мы видим, первое из них создает дополнительное пустое пространство между элементом и окружающими элементами, а второе – внутри элемента, между его границей и содержимым. Рисунок 9.4 служит прекрасной иллюстрацией к вышесказанному.

 

Указание внешних и внутренних отступов, а также параметров рамки элемента

Рис. 9.4. Указание внешних и внутренних отступов, а также параметров рамки элемента

 

При одновременном добавлении как внешних, так и внутренних отступов, к элементу с фиксированной шириной его размеры будут увеличены соответствующим образом. К примеру, у нас есть элемент с шириной в 400 пикселов, к которому мы добавляем внутренний отступ величиной в 40 пикселов со всех сторон. В этом случае его ширина составит
480 пикселов (изначально ширина в 400 пикселов плюс по 40 пикселов с каждой стороны). Добавьте к этому внешний отступ в 20 пикселов, и в итоге элемент займет по ширине 520 пикселов (видимая часть составит 480 пикселов, а пустое пространство со всех сторон – 20 пикселов).

 

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

 

Примечание
Путаница в режиме совместимости. Очень старые версии Internet Explorer, а именно 5 и 5.5, считают, что размер рамки и внутреннего отступа уже включен в указанную ширину элемента; в этих броузерах ширина описанных выше элементов сохранит значение 400 пикселов, а из-за добавления отступов и рамки размер видимой части элемента уменьшится. Чтобы избежать возникновения такой ситуации, можно добавить внутренний отступ родительскому элементу вместо того, чтобы задавать внешний отступ самому элементу. В настоящее время большинство дизайнеров не считают обеспечение нормального отображения сайта в Internet Explorer 5 приоритетной задачей, поэтому единственное, о чем следует задуматься, – как избежать перехода Internet Explorer 6 в режим совместимости. Этот вопрос был рассмотрен в главе 7.
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити