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

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

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 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-страницы:

padding-top | padding-right | padding-bottom | padding-left: значение | проценты | inherit

Величину отступа можно указывать в пикселах (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 позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:

margin-top | margin-right | margin-bottom | margin-left: |auto|inherit

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

Величину отступа можно указывать в пикселах (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-left-style|border-top-style|border-right-style|border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

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

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

webcodius.ru

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

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

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

wd-x.ru

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; }

html-css-tegs.ru

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.

www.eltisbook.ru


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!