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

Продолжаем изучение уроков CSS. В этом уроке мы затронем тоже очень важную тему - тему отступов. Припомним основное: каждый элемент html-страницы - это индивидуальный блок, имеющий свои границы (рамки).

Для примера возьмем абзац из предыдущего урока и в стилях пропишем ему ширину в 500px:

Пример:

.ramka {

border-bottom:2px solid #000000;

border-left:1px dotted green;

border-right:1px dotted green;

border-top:1px solid gray;

width:500px;

}

 

Наш абзац

<p class="ramka">Текст абзаца</p>

станет шириной в 500px. Как мы видим, абзац такой же блочный элемент.

Теперь перейдем непосредственно к отступам. Отступы есть внешние и внутренние.

Внешний отступ - расстояние от границы элемента страницы (border) до соседнего элемента.

Внутренний отступ - расстояние от границы элемента (border) до содержимого этого элемента (например текста).

За величину внешнего отступа отвечает свойство margin

margin-top - верхний внешний отступ

margin-right - правый внешний отступ

margin-bottom - нижний внешний отступ

margin-left - левый внешний отступ

margin - внешний отступ со всех сторон (краткая запись)

Пример:

.ramka {

border-bottom:2px solid #000000;

border-left:1px dotted green;

border-right:1px dotted green;

border-top:1px solid gray;

margin-top:20px;

margin-right:30px;

margin-bottom:40px;

margin-left: 10px;

}


Для сокращения записи можно использовать краткую запись свойства margin:

Пример:

.ramka {

border-bottom:2px solid #000000;

border-left:1px dotted green;

border-right:1px dotted green;

border-top:1px solid gray;

margin:20px 30px 40px 10px;

}


Краткая запись свойства margin:

margin:20px 55px 70px 100px;

  • верхний отступ равен 20px
  • правый отступ равен 55px
  • нижний отступ равен 70px
  • левый отступ равен 100px

margin:20px 55px 70px;

  • верхний отступ равен 20px
  • правый и левый отступы равны 55px
  • нижний отступ равен 70px

margin:20px 55px;

  • верхний и нижний отступы равны 20px
  • правый и левый отступы равны 55px

margin:15px;

  • все отступы равны 15px

За величину внутреннего отступа отвечает свойство padding


padding-top - верхний внутренний отступ

padding-right - правый внутренний отступ

padding-bottom - нижний внутренний отступ

padding-left - левый внутренний отступ

padding - внутренний отступ со всех сторон (краткая запись)

Пример:

.ramka {

border-bottom:2px solid #000000;

border-left:1px dotted green;

border-right:1px dotted green;

border-top:1px solid gray;

padding-top:20px;

padding-right:30px;

padding-bottom:40px;

padding-left: 10px;

}

Как и свойство margin свойство padding можно прописать краткой записью:

Пример:

.ramka {

border-bottom:2px solid #000000;

border-left:1px dotted green;

border-right:1px dotted green;

border-top:1px solid gray;

padding:20px 30px 40px 10px;

}

Краткая запись свойства padding

padding:20px 55px 70px 100px;

  • верхний отступ равен 20px
  • правый отступ равен 55px
  • нижний отступ равен 70px
  • левый отступ равен 100px

padding:20px 55px 70px;

  • верхний отступ равен 20px
  • правый и левый отступы равны 55px
  • нижний отступ равен 70px

padding:20px 55px;

  • верхний и нижний отступы равны 20px
  • правый и левый отступы равны 55px

padding:15px;

  • все отступы равны 15px