Внешние и внутренние отступы
Продолжаем изучение уроков 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;
За величину внутреннего отступа отвечает свойство 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;
|
