Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Отступы в css

Отступы и рамки в CSS с помощью параметров margin, padding и border

Здравствуйте, уважаемые читатели блога webcodius.ru! Сегодня мы продолжим изучение каскадных таблиц стилей или CSS. В прошлых статьях мы уже рассмотрели в общих чертах блочную верстку сайта. В результате у нас стали получаться вполне профессиональные web-страницы, но чего-то им не хватает. А не хватает им скорей всего отступов и рамок. Сегодня мы и займемся рассмотрением стилевых правил margin, padding и border, которые позволяют задавать отступы и рамки для html-элементов.

Параметры отступов в CSS

С помощью каскадных таблиц стилей существует возможность задавать отступы двух видов.

1. Внутренний отступ — это расстояние от воображаемой границы элемента до его содержимого. Величина расстояния задается с помощью параметра padding. Такой отступ принадлежит самому элементу и находится внутри него.

2. Внешний отступ — расстояние между границей текущего элемента веб-страницы и границами соседних элементов, либо родительского элемента. Размер расстояния регулируется свойством margin. Такой отступ находится вне элемента.

Для наглядности картинка:

Например, рассмотрим ячейку html таблицы заполненную текстом. Тогда внутренний отступ это расстояние между воображаемой границей ячейки и содержащимся в ней текстом. А внешний отступ это расстояние между границами соседних ячеек. Начнем с внутренних отступов.

Внутренние отступы в CSS с помощью padding (top, bottom, left, right)

Свойства стиля padding-left, padding-top, padding-right и padding-bottom позволяют задать величины внутренних отступов, соответственно, слева, сверху, справа и снизу элемента web-страницы:

Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. При указании процентов, значение считается от ширины элемента. Значение inherit указывает, что оно наследуется от родителя.

Например, для текущего абзаца я применил правило стиля, задающий левый отступ 20 пикселей, верхний отступ 5 пикселей, справа отступ 35 пикселей и снизу 10 пикселей. Запись правила в файле каскадных таблиц стилей будет выглядеть следующим образом:

p.test{ padding-left:20px; padding-top:5px; padding-right:35px; padding-bottom:10px

}

Сборное правило padding позволяет указать отступы сразу со всех сторон элемента веб-страницы:

padding: [ [ []]]

В сборном правиле разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. В этом случае эффект зависит от количества значений:

если указать одно значение, то оно установит величину отступа со всех сторон элемента страницы;
если указать два значения, то первое задаст величину отступа сверху и снизу, а второе — слева и справа;
если указать три значения, то первое определит величину отступа сверху, второе — слева и справа, а третье — снизу;
если указаны четыре значения, то первое установит величину отступа сверху, второе — справа, третье — снизу, а четвертое — слева.

Таким образом правило CSS приведенное выше можно максимально сократить и записать следующим образом:

p.test{ padding:5px 35px 10px 20px}

Свойство margin или внешние отступы в CSS

Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:

Как уже упоминалось выше внешним отступом является расстояние от границы текущего элемента до границы соседнего элемента, либо, если соседних элементов нет, до внутренней границы родительского контейнера.

Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах:

p { margin-left: 20px; } h2{ margin-right:15%;

}

Значение auto означает, что размер отступов будет автоматически рассчитан браузером. В случае использования процентной записи, то отступы рассчитываются в зависимости от ширины родительского контейнера. Причем это относится не только к margin-left и margin-right, но и для margin-top и margin-bottom отступы в процентах будут рассчитываться в зависимости от ширины, а не высоты контейнера.

В качестве значений внешних отступов допустимо применять отрицательные величины:

p{ margin-left:-20px;

}

Если при положительных значениях отступов соседние элементы отодвигаются, то при отрицательном значении соседний блок наедет на элемент для которого мы задали такой отрицательных отступ.

Внешние отступы мы также можем указать с помощью атрибута стиля margin. Он задает величины отступа одновременно со всех сторон элемента web-страницы:

margin: [ [ []]]

Данное свойство в случае задания одного, двух, трех или четырех значений отступов подчиняется тем же законам, что и правило padding.

Параметры рамки с помощью свойства border

При настройке рамок существует три типа параметров:

border-width — толщина рамки;
border-color — цвет рамки;
border-style — тип линии с помощью которой будет нарисована рамка.

Начнем с параметра толщины рамки:

border-width: [значение | thin | medium | thick] {1,4} | inherit

Толщину рамки можно задавать в пикселях, либо в других доступных в css единицах. Переменные thin, medium и thick задают толщину рамки в 2, 4 и 6 пикселей соответственно:

border-width:medium;

Как и для свойств padding и margin, для параметра border-width разрешается использовать одно, два, три или четыре значения, задавая таким образом толщину рамки для всех сторон сразу или для каждой по отдельности:

border-width: 5px 3px 5px 3px

Для текущего абзаца сделаем толщину верхней рамки 1px, правой 2px, нижней 3px, а левой 4px с помощью правила {border-width: 1px 2px 3px 4px;}

С помощью атрибутов стиля border-left-width, border-top-width, border-right-width и border-bottom-width можно задавать толщину, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-width|border-top-width|border-right-width|border-bottom-width: thin|medium|thick||inherit

Следующий параметр border-color с помощью которого можно управлять цветом рамки:

border-color: [цвет | transparent] {1,4} | inherit

Свойство позволяет задать цвет рамки сразу для всех сторон элемента или только для указанных. В качестве значения можно использовать принятые в html для цветов способы их задания: шестнадцатеричный код, ключевые слова и т.д.:

p {border-width: 2px; border-color: red}

Значение transparent устанавливает прозрачный цвет рамки, а inherit наследует значение родителя. По умолчанию, если цвет рамки не задан, то будет использоваться тот, который используется для шрифта внутри данного элемента.

С помощью атрибутов стиля border-left-color, border-top-color, border-right-color и border-bottom-color можно задать цвет, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-color|border-top-color|border-right-color|border-bottom-color: transparent||inherit

И последний параметр border-style задает тип рамки:

border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit

Тип рамки можно указывать сразу для всех сторон элемента или только для указанных. В качестве значений можно использовать несколько ключевых слов. Вид будет зависеть от используемого браузера и толщины рамки. Значение none используется по умолчанию и не отображает рамку и ее толщина задается нулевой. Значение hidden имеет тот же эффект. Получаемая рамка для остальных значений в зависимости от толщины приведена в таблице ниже:

1 пиксел 3 пиксела 5 пикселов

dotted	dotted	dotted
dashed	dashed	dashed
solid	solid	solid
double	double	double
groove	groove	groove
ridge	ridge	ridge
inset	inset	inset
outset	outset	outset

Атрибуты стиля border-left-style, border-top-style, border-right-style и border-bottom-style задают стиль линий, которыми будет нарисована, соответственно, левая, верхняя, правая и нижняя сторона рамки:

Как и для параметров внешних и внутренних отступов, для рамки существует универсальное свойство border. Оно позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента:

border: [border-width border-style border-color] | inherit

Значения могут идти в любом порядке, разделяясь пробелами:

td {border: 1px solid yellow}

Для установки границы только на определенных сторонах элемента существуют свойства border-top, border-bottom, border-left, border-right, которые позволяют задать параметры соответственно для верхней, нижней, левой и правой стороны рамок.

Осталось только подвести итоги:

для задания внутренних отступов пользуемся свойством padding;
для настройки внешних отступов существует правило margin;
параметры рамок задаются с помощью атрибута border.

Отмечу, что все эти css свойства увеличивают размеры элемента web-страницы. Поэтому, если мы изменяем толщину рамки или размер отступов у блочных контейнеров, формирующих дизайн web-страницы, то должны будем соответственно изменить размеры этих контейнеров, иначе они могут сместиться, и дизайн будет нарушен.

На этом все, до новых встреч!

Как сделать отступ в css? Параметры margin - padding | World-X

Admin 16.05.2014 - 19:12 2 92+

Начнём тему без лишней вводной информации, и так становится понятно для чего нужно выравнивание на сайте. Поэтому обратимся к примерам и пояснениям.

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». В этом случае, всё немного проще и выглядит следующим образом: ваш код заключаемый в стиль

Вместо послесловия

Вот и всё, остаётся правильно вставить стиль с нужными параметрами, чтобы выровнять или придать визуальное оформление коду (текст, изображение, рекламный баннер и т.п.). Если у Вас остались вопросы, оставьте их в комментариях, постараюсь ответить по мере возможности на каждый из них!

CSS свойства отступов.

Свойство padding определяет величину отступа между границами элемента и его содержимым.

Значения:

auto - определяется браузером.

num - число с единицами измерения.

Пример:

.p { padding : 20px; }

- от каждой стороны по 20px.

Существует возможность задавать отступ от какой-то одной стороны: padding-top, padding-right, padding-bottom, padding-left.

Пример:

.p { padding-left : 30px; }

существует краткая запись задания разных отступов от каждой стороны: padding(отступ сверху, отступ справа, отступ снизу, отступ слева)..

Порядок строго как указан!

Пример:

.p { padding : 10px 30px 20px 80px; }

Свойство margin определяет величину отступа между границами элемента и соседними элементами.

Значения:

auto - определяется браузером.

num - число с единицами измерения.

Пример:

.p { margin : 20px; }

- от каждой стороны по 20px.

Существует возможность задавать отступ от какой-то одной стороны: margin-top, margin-right, margin-bottom, margin-left.

Пример:

.p { margin-left : 30px; }

существует краткая запись задания разных отступов от каждой стороны: margin(отступ сверху, отступ справа, отступ снизу, отступ слева).

Порядок строго как указан!

Пример:

.p { margin : 10px 30px 20px 80px; }

Margin в CSS — используем отступы

«Margin в CSS» – одиннадцатый урок учебника CSS. В этом уроке мы обсудим использование и форматирование различных отступов в CSS.

Отступы позволяют перемещать элементы относительно их реального положения в любой из осей координат. Также отступы позволяют производить «наезжание» одного элемента на другой.

Margin в CSS.

Отступы позволяют изменять пространство между элементами. Отступы в CSS могут принимать отрицательные значения для создания эффекта наложения элементов друг на друга. Все основные параметры для управления отступами и их допустимые значения вы можете видеть в таблице ниже:

Параметр	Описание	Значения
margin	позволяет задать все отступы одновременно	margin–top
margin–right
margin–bottom
margin–left
margin–bottom	позволяет изменить нижний отступ	auto
length
%
margin–left	позволяет изменить левый отступ для элемента	auto
length
%
margin–right	позволяет задать правый отступ	auto
length
%
margin–top	позволяет задать верхний отступ	auto

В данном уроке мы научились использовать отступы в CSS. Margin в CSS — достаточно мощный инструмент отображения текста, который также может использоваться для позиционирования. Отступы позволяют детально настроить отображение текста, задав расстояния между необходимыми элементами.

В следующий раз мы поговорим о создании и форматировании полей в CSS.