Html отступ от края: Отступы | htmlbook.ru

Содержание

margin-right | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

Описание

Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от правого края элемента

Синтаксис

margin-right: значение | auto | inherit

Значения

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

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin-right</title>
  <style>
   body { 
    margin-right: 25%; /* Отступ справа */
    margin-left: 25%; /* Отступ слева */
   }
   .panel {
    background: #007083; /* Цвет фона */
    color: white; /* Цвет текста */
    padding: 10px; /* Поля вокруг текста */
    text-align: justify; /* Выравнивание по ширине */ 
   }
  </style>
 </head>
 <body>
  <div>
   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.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства margin-right

Объектная модель

[window. ]document.getElementById(«elementID»).style.marginRight

Браузеры

Браузер Internet Explorer 6 удваивает значение левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Свойство margin

Свойство margin задаёт величину отступа по периметру элемента создающего пространство по его внешней стороне. Отступы можно задать как от каждого края элемента одновременно, так и по отдельности, в зависимости от заданных параметров.

Варианты записей отступов в CSS


margin : auto;
margin : 0px;
margin : 1px 2px;
margin : 0px 6px 4px;
margin : 0px 3px 6px 9px;


auto – данная опция задаёт автоматический расчёт размеров отступов.

0px – по всему периметру элемента отступ будет иметь нулевое значение.

1px 2px1px = верх и низ. 2px = лево и право.

0px 6px 4px0px = верх. 6px = лево и право. 4px = низ.

0px 3px 6px 9px0px = верх. 3px = право. 6px = низ. 9px = лево. (По часовой стрелке)

Свойства отступов по всем сторонам

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

	
margin : 10%;
margin : 20px;
margin : auto;


HTML

<div>
  <div>
    Отступы по всем сторонам
  </div>
</div>


CSS

.container {
    display: inline-block;
    background-color: #f00;	
}
. box {
    margin: 20px;
    padding: 20px;
    border: 4px solid #000;
    background-color: #fc0;
}


Свойства отступов по отдельным сторонам

Отступы элемента можно задать по отдельности, благодаря соответствующим свойствам:

Отступ сверху и снизу


margin: 20% 0%;
margin: 20px 0px;
margin: auto 0px;


Отступ слева и справа


margin: 0% 20%;
margin: 0px 20px;
margin: 0px auto;


Верх / лево и право / низ


margin: 0px 10px 20px;
margin: 0% 10% 20%;


Отступы по часовой стрелке


margin : 0px 10px 20px 30px;


Отступ сверху

Свойство margin-top определяет величину отступа по верхнему краю элемента.

		
margin-top : 10%;
margin-top : 20px;
margin-top : auto;


Отступ слева

Свойство margin-left определяет величину отступа по левому краю элемента.


margin-left : 10%;
margin-left : 20px;
margin-left : auto;


Отступ справа

Свойство margin-right определяет величину отступа по правому краю элемента.


margin-right : 10%;
margin-right : 20px;
margin-right : auto;


Отступ снизу

Свойство margin-bottom определяет величину отступа по нижнему краю элемента.


margin-bottom : 10%;
margin-bottom : 10px;
margin-bottom : auto;


margin и padding задают внешние и внутренние отступы CSS

margin и padding задают внешние и внутренние отступы CSS Стиль margin: задает внешний отступ контейнера от границ того контейнера, в который он вложен.

Стиль padding: задает внутренний отступ от границы контейнера до его содержимого.

Значение можно задавать как одной цифрой, тогда отступ будет одинаковый со всех сторон, например — margin: 10px;.

Можно указать отступ для каждой стороны — margin: 0px 10px 5px 20px, поочередно устанавливается отступ от верхнего, правого, нижнего, и левого края.

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

Если указать два значения, то первое значение устанавливает поля от верхнего и нижнего края, второе  от левого и правого

Так же можно указать конкретный отступ от одной из сторон элемента
margin-bottom: — устанавливает величину отступа от нижнего края элемента
margin-left: — устанавливает величину отступа от левого края элемента
margin-height: — устанавливает величину отступа от правого края элемента
margin-top: — устанавливает величину отступа от верхнего края элемента

Со стилем padding: все тоже самое , но он делает внутренний отступ в контейнере до его содержимого

Примеры
margin: 20px; — отступ контейнера 20 пикселей
margin: 10px 0px 10px 0px; — отступ от верха и низа 10px, а с боков по 0px
margin-top: 15px; — устанавливает отступ от верха до границы контейнера
padding: 10px; — внутренний отступ до содержимого в контейнере 10px
padding-bottom: 12px; — внутренний отступ от низа до содержимого

Так же с помощью margin: и padding: можно не только создавать отступы, но и выравнивать контейнеры. Например если прописать margin-left: auto; margin-height: auto; или margin: 0 auto; то контейнер выровняется посередине.

К примеру margin-left: auto; margin-height: auto; margin: 900px; будет означать что контейнер выравнивается по середине, и его ширина 900px, а внешние отступы автоматически.

Css отступ справа от края. Изучаем отступы текста в html. Параметры отступов в CSS

В прошлом видео уроке мы научились удалять и добавлять новую информацию в новую версию HTML-документа, при этом сообщая об этом поисковым системам и выделяя визуально, чтобы посетители также могли видеть изменения. Для этого, Мы использовали теги del и ins .

В этом видео уроке мы продолжаем тему форматирования текста в HTML-документе. Мы познакомимся с двумя HTML-тегами, которые указывают верхний и нижний индекс текста.

HTML-тег sup — верхний индекс текста в HTML.

HTML-тег

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

Но если Ваш сайт не относится к перечисленным темам, это не значит, что тег не пригодится. Достаточно проявить фантазию и смекалку и найти применение этому элементу.

HTML-тег sub — нижний индекс текста в HTML.

Что касается HTML-тега , то он является противоположностью тегу , и отвечает за указание нижнего индекса текста. Нижний индекс текста может быть использован, при написании формул или математических уравнений. Но кроме этого, возможно Вы сможете найти и другое применение тегу .

Следующий Видео Урок посвящен еще двум тегам, которые в некоторых ситуациях могут быть просто незаменимы. При чем они способны не только форматировать текст, например, в статье, но и при указании различной информации на сайте во время верстки страниц. Один из тегов осуществляет перенос в HTML , а второй рисует горизонтальную линию.

CSS позволяет производить гибкую настройку текста, который представлен с помощью языка HMTL. Сегодня мы рассмотрим действие свойства «text-transform», дающего возможность менять регистр шрифта. Данная опция поддерживается всеми современными браузерами и входит в спецификацию всех версий CSS.

Назначение

Свойство «text-transform» может принимать три основных значения и два добавочных. К примеру, можно назначить верхний регистр ко всему выделенному тексту. Либо можно дать команду противоположному предыдущему свойству, где все символы становятся строчными. Производить назначение можно с помощью любого удобного для вас метода. Например, с использованием встроенных стилей. Или вы можете создать

Отдельный файл с описанием всех свойств. Какой использовать способ присвоения, решать только вам. «Text-transform» может принимать следующие значения:

  • Uppercase. Делает все выделенные символы заглавными. В CSS uppercase встречается часто, так как это значение помогает решить многие сложные задачи, связанные с текстом.
  • Lowercase. Данное свойство полностью противоположно команде uppercase.
  • Capitalize. Меняет регистр первой буквы на верхний. Остальные символы не будут изменяться.
  • None. Позволяет отменить все назначенные значения (необходимо для предопределения свойства). Как правило, данное значение устанавливается по умолчанию.
  • Inherit. Наследует все свойства у родительского элемента. Следует заметить, что IE не поддерживает этой свойство.

Применение

С использованием CSS верхний регистр (или подобные эффекты) устанавливается с помощью одной простой команды. Поэтому нет необходимости изменять или переписывать весь текст. Если речь идет об одностраничном сайте, то данное свойство, возможно, и не пригодится. Но когда под вашим управлением находится огромный портал, где нужно исправить регистр букв в определенных фрагментах, то «text-transform» становится единственным эффективным средством. Например, нужно исправить шрифт в заголовочных тегах «h3». Для этого нужно добавить запись: «h3 { text-transform: uppercase; }», и тогда все заголовки второго уровня будут иметь верхний регистр.

Особенности

Некоторые, возможно, считают, что ручная обработка текста и изменение шрифта с помощью свойства «text-transform» не имеет никаких различий. Но это не так. Если вы поменяете вручную на прописные (верхний регистр), то при копировании этой информации с вашего сайта символы так и останутся без изменений. Если использовать язык CSS, то все происходит по-другому. Свойство «text-transform» лишь зрительно для пользователей меняет шрифт. Но в действительности символы остаются неизменными. Это происходит со всеми значениями данного свойства. Скопированная информация (текст) будет иметь первоначальный регистр, какой используется в исходном коде страницы. В этом и заключается единственное различие между ручной обработкой и использованием CSS-команд.

Неважно, какой вы хотите использовать — нижний или верхний регистр, главное, не забывать предназначение. Например, если изменения нужны вам только с декоративной целью, то можете спокойно применять свойство «text-transform». Ну а если вы знаете, что ваши пользователи наверняка будут копировать выложенную вами информацию, то лучше всего вручную изменять регистр всего текста. Ведь иногда читатели не замечают такой подмены шрифта. Это особенно критично, когда речь идет о важных документах и подобной информации.

Здравствуйте. Иногда при создании веб-страничек необходимо некоторым словам задать с помощью css верхний регистр или надстрочное положение. Давайте посмотрим, как это делается.

Верхний и нижний регистр с помощью css

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

Например, надо написать формулу H 2 O в html-документе. Это делается так:

Это свойство отвечает за вертикальное выравнивание текста. Его значение super определяет, что текст выведется в верхнем индексе. Но размер шрифта остался таким же, как и у обычного текста. Чтобы все выглядело более красиво, нужно также задать размер шрифта чуть меньше с помощью свойства font-size .

Вот так вот просто работает свойство. Соответственно, для вывода в нижнем индексе нужно написать так:

Top-index{
Vertical-align: sub;
}

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

Это все, что вам нужно знать о верхнем и нижнем индексе в css. Никаких дополнительных возможностей свойство не дает, да и они не нужны. При желании вы можете как-то по особенному оформить этот текст, но это редко бывает необходимо.

Где может пригодиться

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

Свойство полностью кроссбраузерно и поддерживается во всех версиях CSS.

Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения смещения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два элемента для создания индекса: (от англ. superscript) — верхний индекс и (от англ. subscript) — нижний индекс. Текст, помещённый в один из этих контейнеров, обозначается меньшим размером, чем базовый текст, и смещается относительно него вверх или вниз. В примере 1 приведено совместное использование указанных элементов и стилей для изменения вида текста.

Пример 1. Создание верхнего и нижнего индекса

Верхний и нижний индекс

Характеристическое уравнение поверхности второй степени

λ3 — I1λ2 + I2λ — I3 = 0

В примере одновременно встречается как нижний, так и верхний индекс. Для изменения начертания шрифта индекса применяются стили, которые задают единое оформление (рис. 1).

Рис. 1. Вид индексов после применения стилей

Можно вообще отказаться от использования и в пользу стилей. Аналогом этих элементов служит свойство vertical-align , заставляющее текст смещаться по вертикали на заданное расстояние. В частности, в примере 2 в качестве значения применяется 0.8em для верхнего индекса и -0.5em для нижнего. Em — это относительная единица, равная размеру текущего шрифта. Например, 0.5em говорит о том, что текст надо сдвинуть на половину размера шрифта.

Пример 2. Использование стилей для управления индексами

Верхний и нижний индекс

Многочлен степени n

f(x) = a0 + a1 x + … + an-1 xn-1 + an xn

В примере сама формула выводится увеличенным размером, символы верхнего индекса устанавливаются красным цветом, а нижние — синим (рис. 2).

Параметр margin

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5. 5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS CSS1
Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.php#propdef-margin

Описание

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от левого края элемента

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

Параметр margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон.

Синтаксис

margin: значение | auto {1,4}

Аргументы

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

Табл. 1. Зависимость от числа аргументов
Число аргументов Результат
1 Отступы будут установлены для всех сторон элемента.
2 Первый аргумент устанавливает отступ от верхнего и нижнего края, второй аргумент — от левого и правого.
3 Первый аргумент задает отступ от верхнего края, второй — одновременно от левого и правого края, а третий — от нижнего края.
4 Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

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

Пример






margin

BODY {
 margin: 0px;
}

DIV.parent {
 margin: 20%;
 background: #fd0;
 padding: 10px;
}

DIV.child {
 border: 3px solid #666;
 padding: 10px;
 margin: 10px;
}
</style>
</head>
<body>

<div>
<div>
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.
</div>
</div>

</body>
</html>

Результат данного примера показан ни рис. 2.

Рис. 2. Применение параметра margin

Объектная модель

[window.]document.getElementById(«elementID»).style.margin

Стилевые параметры отступов (полей) CSS. Примеры

Свойства margin и padding могут принимать от одного до четырех значений.

Параметр Значение Описание
padding значение1 [значение2] [значение3] [значение4]

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

padding — устанавливает значение полей вокруг содержимого элемента (контента).
margin margin — устанавливает отступ (расстояние) от границы текущего элемента до внутренней границы его родительского элемента.
Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора <body> равное нулю.
Число значенийРезультат
значение1Поля будут установлены одновременно от каждого края элемента.
значение1
значение2
Первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого.
значение1
значение2
значение3
Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
значение1
значение2
значение3
значение4
Поочередно устанавливается поля от верхнего, правого, нижнего и левого края.

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

CSS свойство margin-right — Как создать сайт

CSS справочник

Определение и применение

CSS свойство margin-right задает величину внешнего отступа от правого края элемента.

На изображении салатовым цветом обозначена зона за которую отвечает свойство margin-right:

Поддержка браузерами

CSS синтаксис:

margin-right:"length | auto | initial | inherit";

JavaScript синтаксис:

object.style.marginRight = "15px"

Значения свойства

Значение Описание
length Определяет отступ в пикселях, см и др. единицах. Значение по умолчанию 0. Допускаются отрицательные значения.
% Определяет отступ в процентах от содержащего блока родительского элемента. Допускаются отрицательные значения.
auto Браузер вычисляет отступ самостоятельно.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Отступы элемента.</title>
<style> 
h2 {
margin-top :15px; /* устанавливает величину отступа от верхнего края элемента. */
margin-right :50px; /* устанавливает величину отступа от правого края элемента. */
margin-bottom :15px; /* устанавливает величину отступа от нижнего края элемента. */
margin-left :150px; /* устанавливает величину отступа от левого края элемента. */
}
.primer1 {
width :50px; /* задаём ширину блока */
height :50px; /* задаём высоту блока */
background-color:yellow; /* задаём цвет заднего фона */
margin-top :25px; /* устанавливает величину отступа от верхнего края элемента. */
margin-right :25px; /* устанавливает величину отступа от правого края элемента. */
margin-bottom :25px; /* устанавливает величину отступа от нижнего края элемента. */
margin-left :25px; /* устанавливает величину отступа от левого края элемента. */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer2 {
width :50px; /* задаём ширину блока */
height :50px; /* задаём высоту блока */
background-color:lime; /* задаём цвет заднего фона */
margin-top :25px; /* устанавливает величину отступа от верхнего края элемента. */
margin-right :25px; /* устанавливает величину отступа от правого края элемента. */
margin-bottom :25px; /* устанавливает величину отступа от нижнего края элемента. */
margin-left :75px; /* устанавливает величину отступа от левого края элемента. */
border:1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer3 {
width :50px; /* задаём ширину блока */
height :50px; /* задаём высоту блока */
background-color:blue; /* задаём цвет заднего фона */
margin-top :- 40px; /* устанавливает отрицательную величину отступа от верхнего 
края элемента. 25px-40px = 15px (наслоение) */
margin-right :25px; /* устанавливает величину отступа от правого края элемента. */
margin-bottom :25px; /* устанавливает величину отступа от нижнего края элемента. */
margin-left :100px; /* устанавливает величину отступа от левого края элемента. */
border:1px solid; /* задаём сплошную границу для всех сторон элемента */
}
</style>
</head>
	<body>
		<h2>Заголовок первого уровня</h2>
		<div class = "primer1"></div>
		<div class = "primer2"></div>
		<div class = "primer3"></div>
	</body>
</html>

Пример использования отступов элемента.

 

CSS справочник

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

Коробочная модель

Коробочная модель

Содержание

  • 8.1 Размеры коробки
  • 8.2 Пример полей, отступов и границ
  • 8.3 Свойства полей: ‘margin-top’, ‘margin-right’, ‘margin-bottom’, ‘margin-left’ и ‘margin’
  • 8.4 Свойства заполнения: ‘padding-top’, ‘padding-right’, ‘padding-bottom’, ‘padding-left’ и ‘padding’
  • 8.5 Свойства границ
    • 8.5.1 Ширина границы: ‘border-top-width’, ‘border-right-width’, ‘border-bottom-width’, ‘border-left-width’ и ‘border-width’
    • 8.5.2 Цвет границы: ‘border-top-color’, ‘border-right-color’, ‘border-bottom-color’, ‘border-left-color’ и ‘border-color’
    • 8.5.3 Стиль границы: ‘border-top-style’, ‘border-right-style’, ‘border-bottom-style’, ‘border-left-style’ и ‘border-style’
    • 8.5.4 Сокращенные свойства границы: ‘border-top’, ‘border-right’, ‘border-bottom’, ‘border-left’ и ‘border’
  • 8.6 Блочная модель для встроенных элементов в двунаправленном контексте

Модель блока CSS описывает прямоугольные блоки, которые сгенерирован для элементов в документе дерево и разложено согласно визуальному форматированию модель.

В каждой коробке есть область содержимого (например, текст, изображение и т. д.) и необязательное окружение набивка , граница , и маржа областей; размер каждой области определяется свойствами, определенными ниже. Следующее диаграмма показывает, как эти области связаны, и терминология, используемая для обозначения на части поля, границы и заполнения:

Поля, граница и отступы могут быть разбиты на верхнюю, правую и нижний и левый сегменты (например, на схеме «LM» для левого поля, «RP» для правого отступа, «TB» для верхней границы и т. Д.).

Периметр каждой из четырех областей (контент, отступы, граница, и поле) называется «краем», поэтому каждый блок имеет четыре края:

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

Каждый край может быть разбит на верхний, правый, нижний и левый край.

Размеры области содержимого блока — ширина содержимого и высота содержимого — зависят от нескольких факторов: является ли элемент, генерирующий коробка имеет ширину или свойство ‘высота’ установить, содержит ли поле текст или другие поля, независимо от того, ящик стол и т. д.Ширина и высота коробки обсуждаются. в главе о визуальном форматировании детали модели.

Стиль фона для областей содержимого, отступов и границ поле определяется свойством ‘background’ генерирующий элемент. Фон полей всегда прозрачен.

В этом примере показано, как поля, отступы и границы взаимодействовать. Пример HTML-документа:


  <ГОЛОВА>
     Примеры полей, отступов и границ 
    <СТИЛЬ type = "text / css">
      UL {
        фон: желтый;
        маржа: 12px 12px 12px 12px;
        отступ: 3px 3px 3px 3px;
                                     / * Границы не установлены * /
      }
      LI {
        белый цвет; / * цвет текста белый * /
        фон: синий; / * Контент, отступ будет синим * /
        маржа: 12px 12px 12px 12px;
        отступ: 12px 0px 12px 12px; / * Примечание с отступом 0px справа * /
        list-style: none / * перед элементом списка нет глифов * /
                                     / * Границы не установлены * /
      }
      LI.withborder {
        стиль границы: пунктирная;
        ширина границы: средний; / * устанавливает ширину границы со всех сторон * /
        цвет границы: салатовый;
      }
    
  
  <ТЕЛО>
    
  • Первый элемент списка
  • Второй элемент списка немного длиннее, чтобы проиллюстрировать упаковку.

приводит к дереву документов с (среди других отношений) элемент UL, который имеет два LI дети.

Первая из следующих диаграмм иллюстрирует, что этот пример будет производить. Второй иллюстрирует взаимосвязь между поля, отступы и границы элементов UL и его дочерние элементы LI. (Изображение не в масштабе.)

Обратите внимание, что:

  • Ширина содержимого для каждого блока LI равна рассчитывается сверху вниз; содержащий блок для каждого блока LI устанавливается элементом UL.
  • Высота поля поля каждого блока LI зависит от высоты его содержимого, плюс верх и низ отступы, границы и поля.Обратите внимание, что вертикальные поля между Ящики LI рушатся.
  • Правое заполнение полей LI было установлено на нулевую ширину (свойство padding). В Эффект очевиден на второй иллюстрации.
  • Поля полей LI прозрачны — поля всегда прозрачный — поэтому цвет фона (желтый) заполнения UL и через них просвечиваются области содержания.
  • Второй элемент LI определяет пунктирную границу ( свойство ‘border-style’).

Свойства поля определяют ширину области поля поля.Сокращенное свойство ‘margin’ устанавливает поля для всех четырех сторон, в то время как другие свойства полей устанавливаются только их соответствующая сторона. Эти свойства применяются ко всем элементам, но вертикальные поля не повлияют на незамещенные встроенные элементы.

Свойства, определенные в этом разделе, относятся к <ширина-границы> тип значения, который может принимать одно из следующих значений:

<длина>
Задает фиксированную ширину.
<процент>
Процент рассчитывается относительно ширины сгенерированного блока содержащий блок.Обратите внимание, что это верно и для полей «верхняя граница» и «нижняя граница». Если ширина содержащего блока зависит от этого элемента, то результирующий макет не определен в CSS 2.1.
авто
См. Раздел о расчете ширины и поля для поведения.

Отрицательные значения свойств маржи разрешены, но могут быть ограничения, зависящие от реализации.

‘верхнее поле’ , ‘нижнее поле’
Значение: <ширина-маржи> | наследовать
Начальный: 0
Применимо к: всем элементам, кроме элементов с табличным отображением типы, отличные от table-caption, table и inline-table
Унаследовано: нет
Проценты: относятся к ширине содержащего блока
Медиа: визуальный
Вычисленное значение: указанный процент или абсолютная длина

Эти свойства не влияют на незамещенные встроенные элементы.

‘правое поле’ , ‘левое поле’
Значение: <ширина-маржи> | наследовать
Начальный: 0
Применимо к: всем элементам, кроме элементов с табличным отображением типы, отличные от table-caption, table и inline-table
Унаследовано: нет
Проценты: относятся к ширине содержащего блока
Медиа: визуальный
Вычисленное значение: указанный процент или абсолютная длина

Эти свойства устанавливают верхнее, правое, нижнее и левое поле коробка.

Примеры:

h2 {margin-top: 2em}
 
«маржа»
Значение: <ширина-маржи> {1,4} | наследовать
Начальное: см. Отдельные свойства
Применимо к: всем элементам, кроме элементов с табличным отображением типы, отличные от table-caption, table и inline-table
Унаследовано: нет
Проценты: относятся к ширине содержащего блока
Медиа: визуальный
Расчетное значение: см. Отдельные свойства

Свойство «маржа» сокращенное свойство для установки ‘margin-top’, ‘margin-right’, ‘margin-bottom’ и ‘margin-left’ в одном и том же месте в таблица стилей.

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

Примеры:

body {margin: 2em} / * все поля установлены на 2em * /
body {margin: 1em 2em} / * сверху и снизу = 1em, справа и слева = 2em * /
body {margin: 1em 2em 3em} / * вверху = 1em, right = 2em, внизу = 3em, left = 2em * /
 

Последнее правило приведенного выше примера эквивалентно примеру ниже:

тело {
  маржа сверху: 1em;
  маржа справа: 2em;
  нижнее поле: 3em;
  маржа слева: 2em; / * скопировано с противоположной стороны (справа) * /
}
 

8.3.1 Сворачивающиеся поля

В CSS — смежные поля двух или более блоков (которые могут или могут не быть братьями и сестрами) могут объединяться в единое поле. Маржа которые сочетаются таким образом, говорят, что коллапс , а результирующая комбинированная маржа называется свернутой маржей .

Обрушение смежных вертикальных полей, кроме:

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

Горизонтальные поля никогда не сжимаются.

Два поля примыкают к тогда и только тогда, когда:

  • оба относятся к блокам входящего потока, которые участвовать в одном контексте форматирования блока
  • без линий, без зазоров, без отступов и без границ их (обратите внимание, что определенная линия с нулевой высотой коробки (см. 9.4.2) игнорируются для этой цели.)
  • оба принадлежат смежным по вертикали краям бокса, т. Е. Образуют один из следующие пары:
    • верхнее поле блока и верхнее поле его первого входящего дочернего элемента
    • нижнее поле поля и верхнее поле его следующего входящего потока следующий брат
    • нижнее поле последнего входящего дочернего элемента и нижнее поле его родительский, если родитель имеет «автоматически» вычисленную высоту
    • верхнее и нижнее поля коробки, которая не устанавливает новый контекст форматирования блока, который имеет нулевое вычисленное значение ‘min-height’, zero или ‘auto’ вычисленная «высота», и нет притекающие дети

Свернутая маржа считается прилегающей к другой марже, если таковая имеется его составляющих полей примыкает к этому краю.

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

Примечание вышеупомянутые правила подразумевают, что:

  • Поля между плавающим ящиком и любой другой ящик не разрушается (даже между поплавком и его приточные дети).
  • Поля элементов, которые устанавливают новые контексты форматирования блоков (например, поплавки и элементы с «переполнением», отличным от «видимого») делают не рухнуть со своими втекающими детьми.
  • Поля абсолютно позиционированного ящики не разрушаются (даже со своими дочерними элементами).
  • Поля inline-block боксов не сворачиваются (даже с их притекающих детей).
  • Нижнее поле входящего элемента уровня блока всегда сворачивается с верхним полем следующего уровня входящего блока брат или сестра, если у этого брата нет разрешения.
  • Верхний край блочного элемента в потоке схлопывается вместе с его верхнее поле первого дочернего элемента на уровне блока, если элемент не имеет верхняя граница, без верхнего отступа и у дочернего элемента нет зазора.
  • Нижнее поле прямоугольного блока в потоке с «высотой», равной «авто», и «минимальной высотой», равным нулю, схлопывается. с нижним полем его последнего дочернего элемента на уровне блока, если поле не имеет нижнего отступа и нижнего края, а нижний край дочернего элемента поле не сжимается с верхним полем, имеющим зазор.
  • Собственные поля блока схлопываются, если свойство min-height равно нулю, и у него нет ни верхней, ни нижней границы, ни верхнего или нижнего отступа, и имеет «высоту» 0 или ‘auto’, и он не содержит строки, а все его приточные детские поля (если таковые имеются) схлопываются.

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

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

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

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

Свойства заполнения определяют ширину области заполнения поля. Сокращенное свойство ‘padding’ устанавливает padding для всех четырех сторон, в то время как другие свойства padding устанавливают только их соответствующая сторона.

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

<длина>
Задает фиксированную ширину.
<процент>
Процент рассчитывается с помощью относительно ширины содержащего блока сгенерированного блока, даже для ‘padding-top’ и ‘padding-bottom’. Если ширина содержащего блока зависит от этого элемента, то результирующий макет не определен в CSS 2.1.

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

Эти свойства устанавливают верхнее, правое, нижнее и левое заполнение коробка.

Примеры:

цитата {padding-top: 0.3em}
 
‘набивка’
Значение: {1,4} | наследовать
Начальное: см. Отдельные свойства
Применимо к: всем элементам, кроме table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column
Унаследовано: нет
Проценты: относятся к ширине содержащего блока
Медиа: визуальный
Расчетное значение: см. Отдельные свойства

Свойство padding — это сокращенное свойство для установки ‘padding-top’, ‘padding-right’, ‘padding-bottom’ и ‘padding-left’ в одном месте в таблице стилей.

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

Цвет поверхности или изображение области заполнения задается через свойство background:

Свойства границы определяют ширину, цвет и стиль области границы поля.Эти свойства применяются ко всем элементам.

Примечание. В частности, для HTML, пользовательские агенты могут отображать границы для определенных элементов пользовательского интерфейса (например, кнопки, меню и т. д.) иначе, чем для «обычные» элементы.

8.5.1 Ширина границы: ‘border-top-width’, ‘border-right-width’, ‘border-bottom-width’, ‘border-left-width’ и ‘border-width’

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

thin
Тонкая кайма.
средний
Средняя граница.
толстая
Толстая рамка.
<длина>
Толщина границы имеет явное значение. Явный ширина границы не может быть отрицательной.

Интерпретация первых трех значений зависит от пользователя. агент. Однако должны соблюдаться следующие отношения:

‘тонкий’ <= 'средний' <= 'толстый'.

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

Эти свойства устанавливают ширину верхней, правой, нижней, и левая граница поля.

‘ширина границы’
Значение: <ширина-границы> {1,4} | наследовать
Начальное: см. Отдельные свойства
Применимо к: всем элементам
Унаследовано: нет
В процентах: Н / Д
Медиа: визуальный
Расчетное значение: см. Отдельные свойства

Это свойство является сокращенным свойством для установки ‘ширина-границы’, ‘ширина-правая-граница’, ‘ширина-нижняя-граница’, и ‘border-left-width’ в то же место в таблице стилей.

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

Примеры:

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

h2 {border-width: thin} / * тонкий тонкий тонкий тонкий * /
h2 {border-width: thin толстый} / * тонкий толстый тонкий толстый * /
h2 {border-width: тонкий толстый средний} / * тонкий толстый средний толстый * /
 

8.5.2 Цвет границы: ‘цвет верхней границы’, ‘граница-правый-цвет’, ‘цвет нижней границы’, ‘border-left-color’ и ‘цвет границы’

Свойства цвета границы определяют цвет границы блока.

‘цвет рамки’
Значение: [<цвет> | прозрачный] {1,4} | наследовать
Начальное: см. Отдельные свойства
Применимо к: всем элементам
Унаследовано: нет
В процентах: Н / Д
Медиа: визуальный
Расчетное значение: см. Отдельные свойства

Цвет границы свойство устанавливает цвет четырех границ.Значения имеют следующие значения:

<цвет>
Задает значение цвета.
прозрачный
Граница прозрачная (хотя может иметь ширину).

Цвет границы свойство может иметь от одного до четырех значений компонентов, а значения устанавливаются с разных сторон, как для ‘border-width’.

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

Примеры:

В этом примере граница будет сплошной черной линией.

п {
  черный цвет;
  фон: белый;
  граница: сплошная;
}
 

8.5.3 Стиль границы: ‘border-top-style’, ‘border-right-style’, ‘border-bottom-style’, ‘border-left-style’ и ‘border-style’

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

нет
Без границы; вычисленная ширина границы равна нулю.
скрыто
То же, что «нет», за исключением пограничного конфликта разрешение для элементов таблицы.
пунктирная
Граница представляет собой серию точек.
штриховые
Граница представляет собой серию коротких отрезков линии.
цельный
Граница представляет собой одинарный отрезок линии.
двойной
Граница — две сплошные линии. Сумма две линии и пространство между ними равно значению ‘border-width’.
паз
Граница выглядит как резная в холст.
гребень
Противоположность «канавке»: граница выглядит так, будто выходит из холста.
вставка
Граница делает коробку похожей на он был встроен в холст.
исход
Противоположность «вставке»: граница делает коробку похожей на это выходило из холста.

Все границы рисуются поверх фона блока. Цвет границы, нарисованные для значений ‘Groove’, ‘Rridge’, ‘inset’ и ‘outset’ зависит от границы элемента свойства цвета, но UA могут выбрать свой собственный алгоритм для рассчитать фактические используемые цвета. Например, если цвет границы имеет значение «серебро», тогда UA может использовать градиент цветов из от белого до темно-серого, чтобы обозначить наклонную границу.

‘пограничный’
Значение: {1,4} | наследовать
Начальное: см. Отдельные свойства
Применимо к: всем элементам
Унаследовано: нет
В процентах: Н / Д
Медиа: визуальный
Расчетное значение: см. Отдельные свойства

«Бордюрный стиль» свойство устанавливает стиль четырех границ.Может иметь от одного до четыре значения компонентов, причем значения установлены с разных сторон, как для ‘border-width’ выше.

Примеры:

# xy34 {border-style: сплошная точка}
 

В приведенном выше примере горизонтальные границы будут «сплошными» и вертикальные границы будут «пунктирными».

Так как начальное значение стилей границ — «none», без границ будет виден, если не задан стиль границы.

8.5.4 Сокращенные свойства границ: ‘граница-верх’, ‘граница-правая’, ‘нижняя граница’, ‘граница-левая’ и ‘border’

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

Примеры:

h2 {border-bottom: толстый сплошной красный}
 

Приведенное выше правило устанавливает ширину, стиль и цвет границы. ниже элемент h2. Пропущенные значения установлены на их начальные значения. С следующее правило не определяет цвет границы, граница будет иметь цвет, указанный в свойство ‘color’:

h2 {border-bottom: толстый сплошной}
 

Свойство «граница» — это сокращенное свойство для установки одинаковой ширины, цвета и стиля для все четыре границы коробки.В отличие от сокращенных свойств margin и padding, свойство border не может устанавливать разные ценности на четырех границах. Для этого одна или несколько других границ свойства должны использоваться.

Примеры:

Например, первое правило ниже: эквивалентен набору из четырех правил, показанных после него:

p {граница: сплошной красный}
п {
  border-top: сплошной красный;
  граница справа: сплошной красный;
  нижняя граница: сплошной красный;
  border-left: сплошной красный
}
 

Поскольку в некоторой степени свойства перекрывают друг друга функциональность, порядок, в котором указываются правила, важный.

Примеры:

Рассмотрим этот пример:

blockquote {
  граница: сплошной красный;
  граница слева: двойной;
  черный цвет;
}
 

В приведенном выше примере цвет левой границы черный, в то время как другие границы красные. Это связано с тем, что ‘border-left’ устанавливает ширина, стиль и цвет. Поскольку значение цвета не задается свойство ‘border-left’, это будет взят из «цвета» имущество. Тот факт, что свойство ‘color’ устанавливается после свойства ‘border-left’, не соответствующие.

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

Когда свойство ‘direction’ элемента равно ‘ltr’, крайний левый сгенерированный блок первого строчного блока, в котором элемент появляется, имеет левое поле, левую границу и левый отступ, а крайний правый сгенерированный блок последнего строчного блока, в котором элемент появляется, имеет правый отступ, правую границу и правое поле.

Когда свойство элемента direction — rtl, крайний правый сгенерированный блок первого строчного блока, в котором элемент имеет правый отступ, правую границу и правое поле, а крайний левый сгенерированный блок последнего строчного блока, в котором элемент появляется, имеет левое поле, левую границу и левый отступ.


CSS Padding


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


Этот элемент имеет отступ 70 пикселей.


Попробуйте сами »

CSS Padding

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

С CSS у вас есть полный контроль над заполнением. Есть свойства для установки отступов для каждой стороны элемента (сверху, справа, снизу и слева).


Набивка — отдельные стороны

CSS имеет свойства для определения отступов для каждого сторона элемента:

  • утеплитель
  • обивка правая
  • набивка нижняя
  • обивка левая

Все свойства заполнения могут иметь следующие значения:

  • длина — указывает отступ в пикселях, pt, см и т. Д.
  • % — указывает отступ в% от ширины содержащего элемента
  • inherit — указывает, что заполнение должно быть унаследовано от родительского элемента

Примечание: Отрицательные значения не допускаются.

Пример

Установить разные отступы для всех четырех сторон элемента

:

div {
padding-top: 50 пикселей;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80 пикселей;
}

Попробуй сам »

Padding — сокращенное свойство

Чтобы сократить код, можно указать все свойства заполнения в одно свойство.

Свойство padding является сокращенным свойством для следующего индивидуума свойства набивки:

  • утеплитель
  • обивка правая
  • набивка нижняя
  • обивка левая

Итак, вот как это работает:

Если свойство padding имеет четыре значения:

  • отступы: 25 пикселей, 50 пикселей, 75 пикселей, 100 пикселей;
    • верхний отступ 25px
    • правый отступ — 50 пикселей
    • нижний отступ 75px
    • отступ слева — 100 пикселей

Пример

Используйте сокращенное свойство padding с четырьмя значениями:

div {
отступ: 25 пикселей, 50 пикселей, 75 пикселей, 100 пикселей;
}

Попробуй сам »

Если свойство padding имеет три значения:

  • отступы: 25 пикселей, 50 пикселей, 75 пикселей;
    • верхний отступ 25px
    • правое и левое отступы — 50 пикселей
    • нижний отступ — 75 пикселей

Пример

Используйте сокращенное свойство padding с тремя значениями:

div {
отступ: 25 пикселей, 50 пикселей, 75 пикселей;
}

Попробуй сам »

Если свойство padding имеет два значения:

  • отступ: 25 пикселей, 50 пикселей;
    • верхний и нижний отступы 25 пикселей
    • правое и левое отступы — 50 пикселей

Пример

Используйте сокращенное свойство padding с двумя значениями:

div {
отступ: 25 пикселей 50 пикселей;
}

Попробуй сам »

Если свойство padding имеет одно значение:

  • отступ: 25 пикселей;
    • все четыре отступа имеют размер 25 пикселей

Пример

Используйте сокращенное свойство padding с одним значением:

div {
отступ: 25 пикселей;
}

Попробуй сам »

Заполнение и ширина элемента

Свойство CSS width определяет ширину области содержимого элемента.В область содержимого — это часть внутри отступа, границы и поля элемента. (коробчатая модель).

Итак, если элемент имеет указанную ширину, добавление отступа к этому элементу будет добавляется к общей ширине элемента. Часто это нежелательный результат.

Пример

Здесь элементу

задана ширина 300 пикселей. Однако фактическая ширина элемента
будет 350 пикселей (300 пикселей + 25 пикселей слева + 25 пикселей справа):

div {
width: 300px;
отступ: 25 пикселей;
}

Попробуй сам »

Чтобы сохранить ширину 300 пикселей, независимо от количества отступов, вы можете использовать box-sizing собственности.Это заставляет элемент сохранять свою фактическую ширину; если если увеличить отступ, доступное пространство для содержимого уменьшится.

Пример

Используйте свойство box-sizing, чтобы сохранить ширину 300 пикселей, независимо от количество набивки:

div {
width: 300px;
отступ: 25 пикселей;
размер коробки: рамка-рамка;
}

Попробуй сам »

Другие примеры

Установить левое заполнение
В этом примере показано, как установить левое заполнение элемента

.

Установить правое заполнение
В этом примере показано, как установить правое заполнение элемента

.

Установить верхнее заполнение
В этом примере показано, как установить верхнее заполнение элемента

.

Установить нижнее заполнение
В этом примере показано, как установить нижнее заполнение элемента

.



Все свойства заполнения CSS

Имущество Описание
набивка Сокращенное свойство для установки всех свойств заполнения в одном объявлении
набивка нижняя Устанавливает нижнее заполнение элемента
обивка левая Устанавливает левое заполнение элемента
обивка правая Устанавливает правое заполнение элемента
утеплитель Устанавливает верхнее заполнение элемента


padding — CSS: каскадные таблицы стилей

Сокращенное свойство padding CSS устанавливает область заполнения сразу со всех четырех сторон элемента.

Область заполнения элемента — это пространство между его содержимым и границей.

Примечание. Padding создает дополнительное пространство внутри элемента. Напротив, поле создает дополнительное пространство вокруг элемента .

Это свойство является сокращением для следующих свойств CSS:

 
заполнение: 1em;


набивка: 5% 10%;


заполнение: 1em 2em 2em;


отступ: 5px 1em 0 2em;


дополнение: наследовать;
заполнение: начальное;
заполнение: вернуться;
заполнение: не установлено;
  

Свойство padding может быть указано с использованием одного, двух, трех или четырех значений.Каждое значение — это <длина> или <процент> . Отрицательные значения недопустимы.

  • Когда указано одно значение , оно применяет то же заполнение к всем четырем сторонам .
  • Когда указаны два значения , первое заполнение применяется к верхнему и нижнему , второе — к левому и правому .
  • Если указано , три значения , первое заполнение применяется к верхнему , второе к справа и слева , третье к нижнему .
  • Если указано , четыре значения , отступы применяются к верхнему , правому , нижнему и левому в указанном порядке (по часовой стрелке).

Значения

<длина>

Размер заполнения как фиксированное значение.

<процент>

Размер заполнения в процентах относительно ширины содержащего блока.

Настройка заполнения пикселями

HTML
   
У этого элемента умеренное заполнение.

В этом элементе огромные отступы!

CSS
  h5 {
  цвет фона: салатовый;
  отступ: 20 пикселей 50 пикселей;
}

h4 {
  цвет фона: голубой;
  отступ: 110 пикселей, 50 пикселей, 50 пикселей, 110 пикселей;
}
  
Результат

Настройка заполнения пикселями и процентами

  заполнение: 5%;

отступ: 10 пикселей;

отступ: 10 пикселей 20 пикселей;
                            

отступ: 10 пикселей 3% 20 пикселей;
                            
                            

отступ: 1em 3px 30px 5px;
                            
                            
                            
  

Таблицы BCD загружаются только в браузере

Введение в базовую блочную модель CSS — CSS: каскадные таблицы стилей

При компоновке документа механизм визуализации браузера представляет каждый элемент в виде прямоугольного блока в соответствии со стандартом CSS базовая модель коробки .CSS определяет размер, положение и свойства (цвет, фон, размер границы и т. Д.) Этих блоков.

Каждый блок состоит из четырех частей (или областей ), определяемых своими соответствующими краями: край содержимого , край заполнения , край границы и край поля .

Область содержимого , ограниченная краем содержимого, содержит «реальное» содержимое элемента, такое как текст, изображение или видеопроигрыватель.Его размеры: ширина содержимого (или ширина содержимого ) и высота содержимого (или высота содержимого ). Часто имеет фоновый цвет или фоновое изображение.

Если для свойства box-sizing задано значение content-box (по умолчанию) и если элемент является блочным, размер области содержимого может быть явно определен с шириной , min-width , max-width , height , min-height и max-height свойства.

Область заполнения , ограниченная краем заполнения, расширяет область содержимого, включая заполнение элемента. Его габариты составляют: ширина набивки , а высота — — высота.

Толщина заполнения определяется свойствами padding-top , padding-right , padding-bottom , padding-left и сокращенно padding .

Область границы , ограниченная краем границы, расширяет область заполнения, чтобы включить границы элемента.Его размеры: ширина рамки и высота рамки .

Толщина границ определяется свойствами border-width и сокращением border . Если для свойства box-sizing задано значение border-box , размер области границы может быть явно определен с шириной , min-width, max-width , height , min- height и max-height свойства.Когда на поле установлен фон ( background-color или background-image ), он простирается до внешнего края границы (то есть простирается под рамкой в ​​z-порядке). Это поведение по умолчанию можно изменить с помощью свойства background-clip css.

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

Размер области поля определяется свойствами margin-top , margin-right , margin-bottom , margin-left и сокращенно margin . Когда происходит сворачивание полей, область полей четко не определяется, поскольку поля разделяются между блоками.

Наконец, обратите внимание, что для незамещенных встроенных элементов объем занимаемого пространства (вклад в высоту строки) определяется свойством line-height , даже если границы и отступы по-прежнему отображаются вокруг содержание.

  • Ключевые концепции CSS: Синтаксис CSS, по правилу Комментарии, специфичность и наследование, коробка, режимы компоновки и модели визуального форматирования, и падение маржи, или начальный, вычислено, решено, указано, использовал, и фактические значения. Определения синтаксиса значений, сокращенные свойства и заменил элементы.

Разница между полями и отступами в CSS и HTML

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

Кроме того, мы исследуем различные уровни интервалов и по-настоящему поймем разницу между Margins и Padding в CSS. В рамках этой области мы также рассмотрим множество настраиваемых параметров, которые вы должны установить для полей и отступов с точными измерениями.

Разница между полями и заполнением

Маржа

Поля управляют шириной интервала между краями вашей веб-страницы и самим элементом.

Ниже представлены четыре варианта собственности:

  • верхнее поле
  • правое поле
  • нижнее поле
  • Левое поле

Варианты синтаксиса поля :

  • верхний край: <длина> | <процент>
  • правое поле: <длина> | <процент>
  • нижнее поле: <длина> | <процент>
  • левое поле: <длина> | <процент>

Набивка

Padding контролирует область непосредственно вокруг вашего элемента.

Ниже представлены четыре варианта свойств :

  • padding-top
  • padding-right
  • padding-bottom
  • Padding-left

Варианты синтаксиса заполнения :

  • обивка: <длина> | <процент>
  • отступ справа: <длина> | <процент>
  • padding-bottom: | <процент>
  • padding-left: |

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

Маржа снаружи. Подумайте о полях, которые вы используете на листе бумаги. Эти поля дают пространство от края бумаги. В HTML поля работают так же, отделяя пространство от края страницы.

Границы просто оборачивают элемент. Граница может сразу же обтекать элемент или может смотреть дальше от элемента, если к элементу применены дополнительные отступы.

Padding обеспечивает пространство вокруг элемента.Подумайте о том, чтобы зимой надеть более тяжелую куртку. Чем толще куртка, тем больше у вас набивки. И в данном случае вы являетесь элементом.

Определение полей и отступов

Использование числовых значений в пикселях

Как мы рассчитываем пиксели? Разрешение дисплея указывает, сколько пикселей содержится на экране. Например, дисплей 1080 × 1920 - это просто сетка высотой 1080 пикселей и шириной 1920 пикселей. На вашей веб-странице. Когда мы перейдем к добавлению размеров в пикселях, вы захотите поиграть с разными числовыми значениями, чтобы скорректировать результаты, которые соответствуют вашим потребностям.

В следующем коде для свойства изображения мы устанавливаем:

  • ширина изображения от до 300 пикселей
  • граница от до 2 пикселей
  • отступы от до 0 пикселей
  • поля от до 0 пикселей

Веб-вывод выглядит следующим образом:

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