Внешние и внутренние отступы в CSS
Начнём тему без лишней вводной информации, и так становится понятно для чего нужно выравнивание на сайте. Поэтому обратимся к примерам и пояснениям.
Содержание статьи:
margin — внешний отступ
Для более точного выравнивания веб объектов сайта воспользуйтесь CSSпараметром – margin. К примеру, самым простым применением станет такая форма:
margin: 20px;
(при этом внешние отступы со всех четырех сторон будут равны 20 пикселей).
Для того чтобы назначить неравнозначные значения для отступа, следует применить следующий вид:
margin: 10px 5px 20px 5px;
(при этом каждой из четырёх сторон присваивается собственное значение в пикселях. Слева направо: верх, лево, низ, право).
Помимо этого параметр «margin» может принимать и такие формы:
margin-top: 10px;
margin-left: 5px;
margin-bottom: 20px;
margin-right: 5px;
(при этом каждый из указанных параметров может выступать индивидуально или в сумме, что аналогично примеру приводимому абзацем выше).
padding – внутренний отступ
С параметром внутреннего отступа всё работает аналогичным способом, не требуя дополнительных значений. Просто параметр заменяется на «padding».
Зачастую, можно видеть применение обоих параметров в одном стиле, то есть для выбранного объекта работает как внешнее выравнивание, так и внутреннее!
пример:
.button {
float: none;
margin: 10px 5px 20px 5px;
padding: 3px
}
(при этом заданный стиль, скажем для «кнопки», будет иметь неравные внешние отступы заданных значений, и равнозначные внешние. Такой вариант будет полезен при построении веб формы).
Вариант применения в коде
Для того чтобы применить на практике выравнивание можно задать новый стиль в таблице CSSшаблона сайта или отредактировать имеющийся. Например, многие объекты сайта подкорректированы созданными или изменёнными стилями, которые благополучно выровняли или сместили код. Нижняя часть сайта «footer» была уменьшена и выровнена по центру параметром: margin: 0 auto;
(при этом внешний отступ принял равные значения для правого и левого края).
НУ или Вы можете создать стиль, окружив код тегами «div». В этом случае, всё немного проще и выглядит следующим образом:
<divstyle=“float: left; margin; 10px 5px 20px 5px; padding: 3px;”>
ваш код заключаемый в стиль
</div>
Вместо послесловия
Вот и всё, остаётся правильно вставить стиль с нужными параметрами, чтобы выровнять или придать визуальное оформление коду (текст, изображение, рекламный баннер и т.п.).
Если у Вас остались вопросы, оставьте их в комментариях, постараюсь ответить по мере возможности на каждый из них!
Подскажите, как сделать отступ в материале только на одной странице, чтобы на другие страницы сайта он не распространялся?
Здравствуйте!
В зависимости от места отступа, можно создать отдельный шаблон для страницы или через «текст» указать стили, которые не будут противоречить основной таблице стилей.