Отступы CSS

CSS - Отступы
CSS Отступы
Селектор:	table; div; img; #tablename
Свойство:	padding; margin;
Значения:	1) px и %
Портал Веб-разработчиков • • Портал CSS

Имея текст, картинки или другие элементы на странице, заключённые в блоки <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 тэги для оформления отступов

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

• padding - внутренние отступы со всех сторон элемента
• padding-bottom - внутренний отступ снизу
• padding-left - внутренний отступ слева
• padding-right - внутренний отступ справа
• padding-top - внутренний отступ сверху

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

• margin - внешний отступ для со всех сторон элемента
• margin-bottom - внешний отступ снизу
• margin-left - внешний отступ слева
• margin-right - внешний отступ справа
• margin-top - внешний отступ сверху

Примечание

Если же есть какие-либо вопросы в отношении оформление линий и другие вопросы относительно CSS настроек, то можно задать вопросы и обсудить тему на странице обсуждения нашего форума.