Отступ от края html: Как сделать отступ текста в html

Leave a Comment / Html / By /

margin-right | CSS | WebReference

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

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

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

Значение по умолчанию0
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис

margin-right: <размер> | <проценты> | auto
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

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

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

Песочница

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

div {
  background: #e4efc7;
  padding: 10px;
  margin-right: {{ playgroundValue }}px;
}

Пример

<!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> Весьма существенно следующее: аллегория монотонно иллюстрирует невротический холерик, таким образом, второй комплекс движущих сил получил разработку в трудах А.
Берталанфи и Ш.Бюлера. </div> </body> </html>

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

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

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

Объект.style.marginRight

Примечание

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

Спецификация

СпецификацияСтатус
CSS Basic Box ModelРабочий проект
CSS Transitions Рабочий проект
CSS Level 2 (Revision 1)Рекомендация
CSS Level 1Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

31213. 511
1161
Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Отступы и поля

См. также

  • margin
  • margin-bottom
  • margin-left
  • margin-top

Отступы и поля — it-black.ru

Отступы и поля — it-black.ru Перейти к содержимому

В этой статье мы подробно поговорим о полях (свойство margin) и отступах (свойство padding) элемента.

margin

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

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

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


//Синтаксис

margin: [ |  | auto] {1,4}

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

  • 1 — отступы будут установлены одновременно от каждого края элемента.
  • 2 — первое значение устанавливает отступ от верхнего и нижнего краёв, второе — от левого и правого.
  • 3 — первое значение задает отступ от верхнего края, второе — одновременно от левого и правого краёв, а третье — от нижнего края.
  • 4 — поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.
padding

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

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


//Синтаксис

padding: [ | ] {1, 4}

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

  • 1 — поля будут установлены одновременно c каждого края элемента.
  • 2 — первое значение устанавливает поля от верхнего и нижнего краёв, второе — от левого и правого.
  • 3 — первое значение задаёт поле от верхнего края, второе — одновременно от левого и правого краёв, а третье — от нижнего края.
  • 4 — поочерёдно устанавливается поля от верхнего, правого, нижнего и левого краёв.


margin-bottom

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




//Синтаксис

margin-bottom:  |  | auto
margin-left

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




//Синтаксис

margin-left:  |  | auto
margin-right

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




//Синтаксис

margin-right:  |  | auto
margin-top

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




//Синтаксис

margin-top:  |  | auto
padding-bottom

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




//Синтаксис

padding-bottom: [ | ]
padding-left

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




//Синтаксис

padding-left: [ | ]
padding-right

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




//Синтаксис

padding-right: [ | ]
padding-top

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




//Синтаксис

padding-top: [ | ]

Расстояния отступов и полей указываются:

  • px — в пикселях или любых других допустимых CSS единицах измерения.
  • % — в процентах.
  • auto — размер полей и отступов автоматически рассчитывается браузером.

Рассмотрим примеры. Пример 1:


<html>
<head>
<style type='text/css'>
/* Отступ от содержимого элемента до его верхней границы равен 30, до левой 20, до нижней 10 и до правой 40 px.  */
.primer1
{
border-style:solid;
padding-top:30px;
padding-left:20px;
padding-bottom:10px;
padding-right:40px;
}
</style>
</head>
<body>
<p>Элемент с заданным внутренним отступом.</p>
</body>
</html>


Пример 2:


<html>
<head>
<style type='text/css'>
.primer2
{
border-style:solid;
border-width:1px;
background-color:red;
}
.primer21
{
border-width:1px;
border-style:solid;
background-color:white;
}  
.primer21
{
margin-top:20px;
margin-bottom:40px;
margin-left:70px;
margin-right:10px;
}
</style>
</head>
<body>
<div>
<p>Элемент с заданным внешним отступом.</p>
<div>
</body>
</html>


Пример 3 (короткая запись):


<html>
<head>
<style type='text/css'>
/* Отступ от содержимого до границы элемента сверху будет равен 60, справа 20, снизу 40, а слева 50 пикселям */
. par1
{
border:2px solid;
padding:60px 20px 40px 50px;
}
/* Отступ от содержимого до границы элемента сверху будет равен 40, слева и справа 30, а снизу 10 */
.par2
{
border:2px solid;
padding:40px 30px 10px;
}
/* Отступ от содержимого до границы элемента сверху и снизу будет равен 40, а слева и справа 30 */
.par3
{
border:2px solid;
padding:40px 30px;
}
</style>
</head>
<body>
<p>Внутренний отступ сверху равен 60, справа 20, снизу 40, а слева 50 пикс.</p>
<p>Внутренний отступ сверху равен 40, слева и справа 30, а снизу 10 пикс.</p>
<p>Внутренний отступ сверху и снизу равен 40, а слева и справа 30 пикс.</p>
</body>
</html>


Пример 4 (короткая запись):


<html>
<head>
<style type='text/css'>
.dv1 
{
border-style:solid;
border-width:1px;
background-color:red;
}
. par1,.par2,.par3
{
border-width:1px;
border-style:solid;
background-color:white;
}  
/* Внешний отступ сверху элемента будет равен 50, справа 20, снизу 40 и слева 50 пикселям */
.par1
{
margin:50px 20px 40px 50px;
}
/* Внешний отступ сверху элемента будет равен 30, слева и справа 40, а снизу 50 пикселям */
.par2
{
margin:30px 40px 50px;
}
/* Внешний отступ сверху и снизу элемента будет равен 30, а слева и справа 50 пикселям */
.par3
{
margin:30px 50px;
}
</style>
</head>
<body>
<div>
<p>Внешний отступ сверху равен 100, справа 20, снизу 40 и слева 100 пикселям.</p>
</div>
<br />
<div>
<p>Внешний отступ сверху равен 30, слева и справа 40, а снизу 50 пикселям.</p>
</div>
<br />
<div>
<p>Внешний отступ сверху и снизу равен 30, а слева и справа 50 пикселям. </p>
</div>
<p><b>Обратите внимание:</b> внешний отступ в данном примере закрашен красным. </p>
</body>
</html>


Facebook

Twitter

  • No Comments

Группа в VK

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Облако меток

Похожие статьи

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

CSS-фреймворки

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

Instagram Vk Youtube Telegram Odnoklassniki

Полезно знать

Рубрики

Авторы

Свойство поля CSS

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

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

равным 35 пикселям:

p {
  margin: 35px;
}

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

Другие примеры «Попробуйте сами» ниже.

Определение и использование

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

  • верхнее поле
  • поле справа
  • нижняя граница
  • поле слева

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

  • margin: 10px 5px 15px 20px;
    • верхнее поле 10px
    • правое поле 5px
    • нижнее поле 15px
    • левое поле составляет 20 пикселей

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

  • margin: 10px 5px 15px;
    • верхнее поле 10px
    • правое и левое поля 5px
    • нижнее поле 15px

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

  • margin: 10px 5px;
    • верхнее и нижнее поля 10px
    • правое и левое поля 5px

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

  • margin: 10px;
    • все четыре поля 10px

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

Показать демо ❯

Значение по умолчанию: 0
По наследству: нет
Анимация: да, см. отдельные свойства . Читать про анимированный Попробуй
Версия: CSS1
Синтаксис JavaScript: объект .style.margin=»100px 50px» Попробуй

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

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

Имущество
поле 1,0 6,0 1,0 1,0 3,5

Синтаксис CSS

margin: length |auto|initial|inherit;

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

Значение Описание Демо
длина Задает поле в px, pt, cm и т. д. Значение по умолчанию — 0. Отрицательное значение допустимы значения. Читать о единицах длины Демонстрация ❯
% Задает поле в процентах от ширины содержащего элемента Демонстрация ❯
авто Браузер вычисляет маржу Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о наследовать

Свертывание полей

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

Этого не происходит на горизонтальных (левых и правых) полях! Только вертикальный (Верх и низ) поля!

Посмотрите на следующий пример:

Пример

в год {
  margin: 30px 0;
}

p. b {
  margin: 20px 0;
}

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

В приведенном выше примере элемент

имеет верхнее и нижнее поле по 30 пикселей.

элемент имеет верхнее и нижнее поле 20px.

Это означает, что вертикальное поле между

и

должно быть 50 пикселей (30 пикселей + 20 пикселей). Но из-за коллапса маржи фактическая маржа заканчивается до 30px!

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

Пример

Задайте для поля элемента

35 пикселей сверху и снизу и 70 пикселей. пикселей для правого и левого:

p {
  поле: 35 пикселей 70 пикселей;
}

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

Пример

Установите поле для элемента

на 35 пикселей вверху, 70 пикселей справа и слева и до 50 пикселей внизу:

p {
  margin: 35px 70px 50px;
}

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

Пример

Установите поле для элемента

на 35 пикселей вверху, 70 пикселей справа, 50 пикселей внизу и до 90 пикселей слева:

p {
  поле: 35 пикселей 70 пикселей 50 пикселей 90 пикселей;
}

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

Связанные страницы

Учебник CSS: CSS Margin

Учебник CSS: CSS Box Model

Ссылка HTML DOM: свойство margin

❮ Предыдущая Полное руководство по CSS Следующий ❯


Свойство CSS margin-block

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

Установите поле для обеих сторон в направлении блока:

div {
  блок поля: 35 пикселей;
}

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

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство margin-block задает поля в начале и конце блока и является сокращенным свойством для следующих свойств:

  • margin-block-start
  • край-блок-конец

Значения свойства margin-block можно задать разными способами:

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

  • margin-block: 10px 50px;
    • поле в начале 10px
      • поле
    • в конце составляет 50 пикселей

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

  • margin-block: 10px;
    • поля в начале и в конце 10px

УС маржинальный блок и свойства margin-inline очень похожи на свойства CSS верхняя граница , нижняя граница , поле слева и margin-right , но маржинальный блок и свойства margin-inline зависят от блочного и встроенного направлений.

Примечание: Связанное свойство CSS режим письма определяет направление блока. Это влияет на то, где находится начало и конец блока, а также на результат свойства margin-block . Для страниц на английском языке направление блока — вниз, а направление строки — слева направо.

Показать демо ❯

Значение по умолчанию: авто
По наследству: нет
Анимация: да. Читать про анимированный Попробуй
Версия: CSS3
Синтаксис JavaScript: объект .style.marginBlock=»50px 20px» Попробуй

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

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

Имущество
блок полей 87,0 87,0 66,0 14,1 73,0

Синтаксис CSS

margin-block: auto| значение |начальный|наследовать;

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

Значение Описание Демо
авто По умолчанию. Значение поля поля по умолчанию для элемента. Демонстрация ❯
длина Указывает блок полей в px, pt, cm и т. д. Отрицательное значение допустимы значения. Читать о единицах длины Демонстрация ❯
% Задает блок полей в процентах относительно размера родительского элемента в линейном направлении. Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

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

Пример

Если для свойства write-mode элемента

задано значение vertical-rl, начало элемента в направлении блока перемещается сверху вправо, и конец элемента перемещается снизу на левую сторону элемента.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *