Все тексты, представленные в данном разделе, являются плодом нашего интеллектуального труда. Перевод уроков осуществлялся вручную, по возможности сохранялся стиль автора и особенности оригинального языка.
Исходя из вышесказанного – огромная просьба к вам, коллеги web-мастера: пожалуйста, уважайте наш труд, при использовании любых материалов нашего сайта и, в частности, данного раздела ставьте ссылку на сайт www.bcat.com.ua. Заранее спасибо!
На этом этапе, мы смотрим на нашу страницу и думаем "ладно, выглядит неплохо, но если добавить отступы – будет еще лучше". А теперь, прежде чем идти дальше, рассмотрим модель блока.
Большинство правил стилей могут применяться к большинству элементов HTML как блочного уровня, так и строчным. Однако некоторые правила применяются только к элементам блочного уровня, - border, margin и padding. Плюс, в большинстве случаев, стили позиционирования текста, также применяются к элементам блочного уровня.
На иллюстрации показано, в каких местах применяются свойства элементов блочного уровня:
Видите разницу между свойствами margin и padding? Ее несложно заметить при видимой границе, по существу, свойство margin указывает расстояние между внешней границей блочного элемента и внутренней границей элемента, в котором он содержится (родительского элемента), тогда как padding определяет расстояние между границей элемента и его содержимым. Примечание: при отсутствии конкретного родительского элемента, старшим элементом любой страницы является тег <body>.
Вернемся к нашей странице. В нашем случае, мы хотим добавить нашим элементам <p> отступ слева 10px, и справа 15px. Таковым будет отступ от края родительского элемента к краю элемента P. Для наглядности этому абзацу я добавил точечную границу зеленого цвета.
Добавьте к селектору P следующие правила стиля:
margin-left: 10px;
margin-right: 20px;
Этот стиль применен к следующему абзацу, также для наглядности изменен цвет фона и добавлена граница:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Как видите, отступ изменился, но текст вплотную подходит к границам блока. Чтобы добавить пустого места между границей элемента и текстом – добавим свойство padding:
background-color: #FFFFD9;
border: 1px solid green;
margin-left: 10px;
margin-right: 20px;
padding: 10px;
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Выглядит неплохо! Но еще хотелось бы добавить красную строку. Так что применим правило text-indent:
background-color: #FFFFD9;
border: 1px solid green;
margin-left: 10px;
margin-right: 20px;
padding: 10px;
text-indent: 20px;
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Как видите, свойство text-indent применяется только к первой строке.
А теперь выровняем абзац по правому краю:
background-color: #FFFFD9;
border: 1px solid green;
margin-left: 10px;
margin-right: 20px;
padding: 10px;
text-indent: 20px;
text-align: right;
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Видите, как работают свойства margin, padding, text-indent и text-align?
Для того чтобы посмотреть пример страницы с правилами стилей, приведенными выше, смотрите эту страницу.
