Свойство CSS padding отвечает за задание отступов внутри элемента от его границы
Синтаксис CSS padding
padding : top right bottom left ;
- top - отступ от верхней границы элемента;
- right - отступ от правой границы элемента;
- bottom - отступ от нижней границы элемента;
- left - отступ от левой границы элемента;
Значения чаще всего задаются в пикселях. Допускается также задание в виде процентов и других допустимых единицах CSS.
Примечание 1
Допускается задание не четырех значений. В зависимости от количества значений действия будут разные:
- Если задано 3 значения, то первое значение устанавливает отступ сверху, второе - одновременно слева и справа, а третье - снизу
- Если задано 2 значения, то первое значение устанавливает отступ сверху и снизу, второе - слева и справа от содержимого
- Если задано 1 значение, то отступ задается одинаковый отступ для всех сторон. Например:
padding : 10px 10px 10px 10px ; Можно задать компактнее: padding : 10px ;
Примечание 2
В отличии от свойства CSS margin , отрицательные значения у padding не допустимы.
Также у padding есть 4 отдельных свойства CSS. Каждое из них отвечает за какое-то направление.
- padding-left - отступ от левой границы элемента;
- padding-right - отступ от правой границы элемента;
- padding-top - отступ от верхней границы элемента;
- padding-bottom - отступ от левой границы элемента;
Например
padding : 3px 5px 7px 10px ; Или можно задать подробно: padding-left : 10px ; padding-right : 5px ; padding-top : 3px ; padding-bottom : 7px ;
Примеры с разными отступами внутри элемента
Пример 1. Отступ текста внутри тега
Пример с нулевыми отступам (padding: 0px)
Пример с одинаковым отступом от всех границ (padding: 10px)
Пример с разными отступам (padding: 10px 0px 0px 30px)
Вот как это выглядит на странице:
Пример с нулевыми отступам (padding: 0px)
Пример с одинаковым отступом от всех границ (padding: 10px)
Пример с разными отступам (padding: 10px 0px 0px 30px)
Пример 2. Отступ объекта внутри объекта
Описание
Устанавливает значение полей вокруг содержимого элемента. Полем называется
расстояние от внутреннего края рамки элемента до воображаемого прямоугольника,
ограничивающего его содержимое (рис. 1).
Свойство padding
позволяет задать величину поля
сразу для всех сторон элемента или определить ее только для указанных сторон.
Синтаксис
padding: [значение | проценты] {1, 4} | inherit
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между
собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых
для CSS единицах. Значение inherit
указывает, что оно наследуется у родителя.
При указании поля в процентах, значение считается от ширины родителя элемента.
HTML5
CSS2.1
IE
Cr
Op
Sa
Fx
padding
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства padding
Объектная модель
document.getElementById("elementID
").style.padding
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit
.
Эта инструкция позволит вам лучше понимать такие свойства CSS, как border, padding и margin. Эти свойства очень помагают разработчикам позиционировать элементы на странице в соответствии с макетом.
Давайте создадим div и присвоим ему свойства margin, padding и border.
Свойство Padding
CSS свойство padding определяет расстояние между границей элемента и его содержимым. Вы можете определить его следующим образом:
- padding-top: 10px;
- padding-right: 10px;
- padding-bottom: 10px;
- padding-left: 10px;
Эту запись можно сократить:
- padding:25px 50px 75px 100px;
- сверху 25px
- справа 50px
- снизу 75px
- слева 100px
- padding:25px 50px 75px;
- сверху 25px
- справа и слева 50px
- снизу 75px
- padding:25px 50px;
- сверху и снизу 25px
- справа и слева 50px
- padding:25px;
- все 25px
Внимание: значение padding добавляется к ширине элемента и зависит от фона элемента.
Иначе говоря у нас есть элемент div с классом div-1:
Div.div-1{
width:150px;
padding: 25px;}
Браузер добавит к ширине элемента левый и правый padding. В результате мы получим элемент шириной 200px.
Свойство Border
CSS свойство border позволяет вам определять стиль и цвет границы элемента.
border-width
Свойство border-width применяется для определения ширины границы. Ширина задается в пикселях или с помощью одного из предопределенных значений: thin (тонкая), medium (средняя) или thick (толстая).
border-color
Свойство border-color применяется для определения цвета границы. Цвет может быть задан следующими способами:
- название — название цвета, например, «red»
- RGB — определяет RGB значение, например, «rgb(255,0,0)»
- Hex — определяет hex значение, например, «#ff0000»
border-style
- dotted
: Определяет точетную границу
- dashed
: Определяет пунктирную границу
- solid
: Определяет толстую границу
- double
: Определяет две границы. Расстояние между ними зависит от значения border-width
- groove
: Определяет объемную вдавленную границу
- ridge
: Определяет объемную выпуклую границу
- inset
: Определяет границу так, что блок качется вдавленным
- outset
: Определяет границу так, что блок качется выпуклым
Вы можете записать свойства границы элемента укороченным образом:
Div.div-2{
border:1px solid #ccc;
}
Свойство Margin
CSS свойство margin определяет расстояние вокруг элемента. Margin освобождает расстояние вокруг элемента (снаружи от border). Margin не имеет цвета фона и всегда остается прозрачным.
Вы можете определить значения margin для элемента следующим образом:
- margin-top:100px;
- margin-bottom:100px;
- margin-right:50px;
- margin-left:50px;
Эту запись можно сократить:
- margin:25px 50px 75px 100px;
- сверху margin 25px
- справа margin 50px
- снизу margin 75px
- слева margin 100px
- margin:25px 50px 75px;
- сверху margin 25px
- справа и слева margin 50px
- снизу margin 75px
- margin:25px 50px;
- сверху и снизу margin 25px
- справа и слева margin 50px
- margin:25px;
- все четыре margin 25px
Используя значения margin по умолчанию вы можете расположить блок по центру грризонтально.
Описание
Устанавливает значение полей вокруг содержимого элемента. Полем называется
расстояние от внутреннего края рамки элемента до воображаемого прямоугольника,
ограничивающего его содержимое (рис. 1).
Свойство padding
позволяет задать величину поля
сразу для всех сторон элемента или определить ее только для указанных сторон.
Синтаксис
padding: [значение | проценты] {1, 4} | inherit
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между
собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых
для CSS единицах. Значение inherit
указывает, что оно наследуется у родителя.
При указании поля в процентах, значение считается от ширины родителя элемента.
HTML5
CSS2.1
IE
Cr
Op
Sa
Fx
padding
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства padding
Объектная модель
document.getElementById("elementID
").style.padding
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit
.
Сразу определю - это очень важный урок. После его изучения Вы сможете располагать элементы на странице, задавать между ними отступы, создавать их внутри отдельного конкретного блока, задавать поля.
padding
Padding - это свойство, которое служит для установления количества полей у элемента от внутреннего края границы до содержимого. Содержимым может быть обычный текст, изображение или дочерний элемент, который так же может иметь свои поля.
Единицами измерения могут быть пиксели (px) или процентное соотношение (%).
#block {
padding: 12px; /* отступ от границ блока до содержания - со всех сторон будет 12 пикселей */
}
Есть возможность указать поле только с одной определённой стороны:
padding-top
- свойство, создающие поля сверху.
padding-right
- свойство, создающие поля справа.
padding-bottom
- свойство, создающие поля снизу.
padding-left
- свойство, создающие поля слева.
#block {
padding-bottom: 25px; /* снизу поле 25 пикселей */
padding-left: 15px; /* слева поле 15 пикселей */
}
Как Вы заметили, если указывать таким образом поля с 2-х или 3-х сторон, то получится длинный код. Для этого существует сокращённая запись свойства padding. В ней поочерёдно указывается все 4 значения - от каждого края в одну строчку, движение идет по часовой строке, начиная с верхнего:
Padding: ВерхнийОтступ ПравыйОтступ ОтступСнизу ОтступСлева;
#block {
padding: 25px 10px 15px 6px; /* сверху 25px, справа 10px, снизу 15px, слева 6px */
}
margin
Свойство margin, в отличии от padding, устанавливает величину отступа между границами элементами.
Если элемент является дочерним, то отступом является пространство от границы элемента до внутреннего края границы родителя.
Если у элемента отсутствует родитель, то отступом считается установленное свойством свободное пространство до краев рамки окружающих элементов.
#block {
margin: 4px;
}
Для указания отступов лишь с определенных сторон существуют следующие свойства:
margin-top
- свойство, создающие отступы сверху.
margin-right
- свойство, создающие отступы справа.
margin-bottom
- свойство, создающие отступы снизу.
margin-left
- свойство, создающие отступы слева.
Как и у свойства padding, у margin тоже имеется возможность сокращенной записи значений для разных сторон. Движение идет по часовой стрелке, с верхнего поля:
Margin: ВерхнийОтступ ПравыйОтступ ОтступСнизу ОтступСлева;
#block {
margin: 15px 10px 5px 25px; /* сверху 15px, справа 10px, снизу 5px, слева 25px */
}
Спасибо за внимание!
Пример с нулевыми отступам (padding: 0px)Пример с одинаковым отступом от всех границ (padding: 10px)Пример с разными отступам (padding: 10px 0px 0px 30px)
Вот как это выглядит на странице:
Пример с нулевыми отступам (padding: 0px)
Пример с одинаковым отступом от всех границ (padding: 10px)
Пример с разными отступам (padding: 10px 0px 0px 30px)
Пример 2. Отступ объекта внутри объекта
Описание
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).
Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон.
Синтаксис
padding: [значение | проценты] {1, 4} | inherit
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. При указании поля в процентах, значение считается от ширины родителя элемента.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства padding
Объектная модель
document.getElementById("elementID ").style.padding
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Эта инструкция позволит вам лучше понимать такие свойства CSS, как border, padding и margin. Эти свойства очень помагают разработчикам позиционировать элементы на странице в соответствии с макетом.
Давайте создадим div и присвоим ему свойства margin, padding и border.
Свойство Padding
CSS свойство padding определяет расстояние между границей элемента и его содержимым. Вы можете определить его следующим образом:
- padding-top: 10px;
- padding-right: 10px;
- padding-bottom: 10px;
- padding-left: 10px;
Эту запись можно сократить:
- padding:25px 50px 75px 100px;
- сверху 25px
- справа 50px
- снизу 75px
- слева 100px
- padding:25px 50px 75px;
- сверху 25px
- справа и слева 50px
- снизу 75px
- padding:25px 50px;
- сверху и снизу 25px
- справа и слева 50px
- padding:25px;
- все 25px
Внимание: значение padding добавляется к ширине элемента и зависит от фона элемента.
Иначе говоря у нас есть элемент div с классом div-1:
Div.div-1{ width:150px; padding: 25px;}
Браузер добавит к ширине элемента левый и правый padding. В результате мы получим элемент шириной 200px.
Свойство Border
CSS свойство border позволяет вам определять стиль и цвет границы элемента.
border-width
Свойство border-width применяется для определения ширины границы. Ширина задается в пикселях или с помощью одного из предопределенных значений: thin (тонкая), medium (средняя) или thick (толстая).
border-color
Свойство border-color применяется для определения цвета границы. Цвет может быть задан следующими способами:
- название — название цвета, например, «red»
- RGB — определяет RGB значение, например, «rgb(255,0,0)»
- Hex — определяет hex значение, например, «#ff0000»
border-style
- dotted : Определяет точетную границу
- dashed : Определяет пунктирную границу
- solid : Определяет толстую границу
- double : Определяет две границы. Расстояние между ними зависит от значения border-width
- groove : Определяет объемную вдавленную границу
- ridge : Определяет объемную выпуклую границу
- inset : Определяет границу так, что блок качется вдавленным
- outset : Определяет границу так, что блок качется выпуклым
Вы можете записать свойства границы элемента укороченным образом:
Div.div-2{ border:1px solid #ccc; }
Свойство Margin
CSS свойство margin определяет расстояние вокруг элемента. Margin освобождает расстояние вокруг элемента (снаружи от border). Margin не имеет цвета фона и всегда остается прозрачным.
Вы можете определить значения margin для элемента следующим образом:
- margin-top:100px;
- margin-bottom:100px;
- margin-right:50px;
- margin-left:50px;
Эту запись можно сократить:
- margin:25px 50px 75px 100px;
- сверху margin 25px
- справа margin 50px
- снизу margin 75px
- слева margin 100px
- margin:25px 50px 75px;
- сверху margin 25px
- справа и слева margin 50px
- снизу margin 75px
- margin:25px 50px;
- сверху и снизу margin 25px
- справа и слева margin 50px
- margin:25px;
- все четыре margin 25px
Используя значения margin по умолчанию вы можете расположить блок по центру грризонтально.
Описание
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).
Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон.
Синтаксис
padding: [значение | проценты] {1, 4} | inherit
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. При указании поля в процентах, значение считается от ширины родителя элемента.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства padding
Объектная модель
document.getElementById("elementID ").style.padding
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Сразу определю - это очень важный урок. После его изучения Вы сможете располагать элементы на странице, задавать между ними отступы, создавать их внутри отдельного конкретного блока, задавать поля.
padding
Padding - это свойство, которое служит для установления количества полей у элемента от внутреннего края границы до содержимого. Содержимым может быть обычный текст, изображение или дочерний элемент, который так же может иметь свои поля.
Единицами измерения могут быть пиксели (px) или процентное соотношение (%).
#block {
padding: 12px; /* отступ от границ блока до содержания - со всех сторон будет 12 пикселей */
}
Есть возможность указать поле только с одной определённой стороны:
padding-top
- свойство, создающие поля сверху.
padding-right
- свойство, создающие поля справа.
padding-bottom
- свойство, создающие поля снизу.
padding-left
- свойство, создающие поля слева.
#block {
padding-bottom: 25px; /* снизу поле 25 пикселей */
padding-left: 15px; /* слева поле 15 пикселей */
}
Как Вы заметили, если указывать таким образом поля с 2-х или 3-х сторон, то получится длинный код. Для этого существует сокращённая запись свойства padding. В ней поочерёдно указывается все 4 значения - от каждого края в одну строчку, движение идет по часовой строке, начиная с верхнего:
Padding: ВерхнийОтступ ПравыйОтступ ОтступСнизу ОтступСлева;
#block {
padding: 25px 10px 15px 6px; /* сверху 25px, справа 10px, снизу 15px, слева 6px */
}
margin
Свойство margin, в отличии от padding, устанавливает величину отступа между границами элементами.
Если элемент является дочерним, то отступом является пространство от границы элемента до внутреннего края границы родителя.
Если у элемента отсутствует родитель, то отступом считается установленное свойством свободное пространство до краев рамки окружающих элементов.
#block {
margin: 4px;
}
Для указания отступов лишь с определенных сторон существуют следующие свойства:
margin-top
- свойство, создающие отступы сверху.
margin-right
- свойство, создающие отступы справа.
margin-bottom
- свойство, создающие отступы снизу.
margin-left
- свойство, создающие отступы слева.
Как и у свойства padding, у margin тоже имеется возможность сокращенной записи значений для разных сторон. Движение идет по часовой стрелке, с верхнего поля:
Margin: ВерхнийОтступ ПравыйОтступ ОтступСнизу ОтступСлева;
#block {
margin: 15px 10px 5px 25px; /* сверху 15px, справа 10px, снизу 5px, слева 25px */
}
Спасибо за внимание!