Отступы CSS
CSS - Отступы
| |
![]() | |
Селектор: | table; div; img; #tablename |
Свойство: | padding; margin; |
Значения: | 1) px и % |
Имея текст, картинки или другие элементы на странице, заключённые в блоки <div>, в таблицем <table> или же имея различные картинки на странице <img> без соответствующих настроек отступов друг от друга данных элементов, страница выглядела бы невзрачно. Поэтому необходимо задать в настройках CSS нужные параметры отступов тех или иных элементов
Использование CSS для оформления сайтов можно обсудить в специально созданной теме нашего форума.
Оформление отступов
Оступы бывают двух типов: внутрениие отступы и внешние отступы, разберём оба варианта на примерах - у нас обычный блок и внутри которого текст:
Как мы видим из этого примера, текст внутри блока "прилипает" к линиям и выгляди не очень красиво, поэтому можно задать параметры отступов. Отступы бывают внутренними и внешними. Внешние отступы также важны, например, когда два бока рядом и они также "прилипают" друг к другу, их можно разъединить с помощью внешних отступов. И так прописываем в css:
#name {
border: 1px solid blue;
padding: 4px;
margin: 2px;
}
Где "padding" - это внутренний отступ со всех четырёх сторон, а "margin" - внешний отступ со всех четырёх сторон. 4px - размер отступа в пикселях, значение, которое можно менять по своему усмотрению. Получаем:
Видим в результате, что текст внутри блока имеет отступы со всех сторон. Если вставить два таких блока, то будет заметно, что их разделяет внешний отступ в два пикселя.
Также можно и задавать отступы отдельно со всех четырёх сторон, как внутренние, так и внешние:
- padding-top - верхний внутренний отступ
- padding-bottom - нижний внутренний отступ
- padding-left - левый внутренний отступ
- padding-right - правый внутренний отступ
Если вместо "padding" вписать "margin", то это будут настройки соответственно внешних отступов.
Оформление отступов у картинок
Внешние отступы следует оформлять например картинкам на сайте, так чтобы текст не "прилипал" к данной картинке:
#img {margin: 6px;}
Здесь очень важно учесть, что данная настройка осуществляет внешний отступ со всех четырёх сторон картинки, в случаях, когда картинка выровнена по какому-либо краю страницы, то она будет смотрется не очень с точки зрения дизайна. Поэтому следует задавать отступы отдельно справа, снизу, сверху от картинки и т.д. Например:
#img {margin-right: 6px;}
Отступ будет оформляться справа от картинки
CSS тэги для оформления отступов
Внутренние отступы
|
Внешние отступы
|
Примечание
Если же есть какие-либо вопросы в отношении оформление линий и другие вопросы относительно CSS настроек, то можно задать вопросы и обсудить тему на странице обсуждения нашего форума.