margin-bottom | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | 0 |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).
Рис. 1. Отступ от нижнего края элемента
Синтаксис
margin-bottom: значение | auto | inherit
Значения
Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или
других допустимых для CSS единицах.
Значение может быть как положительным, так
и отрицательным числом.
- auto
- Указывает, что размер отступов будет автоматически рассчитан браузером.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin-bottom</title>
<style>
.layer1 {
background: #8b0086; /* Цвет фона */
color: white; /* Цвет текста */
padding: 10px; /* Поля вокруг текста */
margin-bottom: -7px; /* Отступ снизу */
}
.layer2 {
margin-left: 40px; /* Отступ слева */
background: #e9c1e4; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div>
<big>Lorem ipsum dolor sit amet</big>
</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>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства margin-bottom
Объектная модель
[window.]document.getElementById(«elementID»).style.marginBottom
Браузеры
Браузер Internet Explorer 6 в некоторых случаях некорректно вычисляет значение отступа, заданное в процентах.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Отступы
CSS по теме
- margin-bottom
Статьи по теме
- Блочные элементы
Рецепты CSS
- Как изменить расстояние между абзацами текста?
- Как разместить несколько картинок рядом по горизонтали?
- Как убрать отступ сверху и снизу от списка?
- Между заголовком и основным текстом слишком большой отступ, как его уменьшить?
margin-right | htmlbook.
ru| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | 0 |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-margin-right |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента (рис. 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.
Отступы
CSS по теме
- margin-right
Статьи по теме
- Внутренняя страница
- Выравнивание слоя по центру
- Две колонки, навигация справа
- Резиновый двухколоночный макет
- Резиновый дизайн. Двухколонный макет
Рецепты CSS
- Как поместить фоновый рисунок в правый нижний угол страницы?
- Как разместить несколько картинок рядом по горизонтали?
- Как создать рамку со скругленными уголками без изображений?
Базовый CSS: Поля в CSS
Урок 9: Поля в CSS
/en/basic-css/the-css-box-model/content/
Поля
Чтобы сделать веб-страницу красивой, важно к добавьте пробел между элементами HTML.
Один из способов сделать это — добавить полей , что создаст пространство вокруг одной или нескольких сторон элемента.
Простое объявление маржи может выглядеть так:
поле: 10 пикселей;
Это объявление означает, что поле поля должно расширяться 10px во всех четырех направлениях — влево, вправо, вверх и вниз — за пределы рамки. Например, рассмотрим элемент padding и объявлением border . Загруженный на веб-страницу, он может выглядеть так:
Поскольку поле создает невидимую рамку вокруг HTML-элемента, может быть не очевидно, что там что-то есть, просто взглянув на него . Однако, если бы вы добавили второй элемент, становится намного понятнее:
Пустое пространство вокруг ваших абзацев является полем, но пространство между двумя вашими абзацами 
По умолчанию браузеры применяют отступ около 16px для каждого элемента : 50px; , ваши два абзаца будут выглядеть примерно так:
Обратите внимание, что слева и справа больше пробелов. Вы также можете изменить поле на уменьшить пробел или даже устранить его . Например, поле : 0; Декларация будет выглядеть примерно так:
При добавлении значения поля 0 можно опустить пикселей .
Вы даже можете добавить отрицательное поле , например margin: -15px; , чтобы они перекрывались:
Как и многие другие объявления в этом уроке, объявление поля также является сокращением. Его можно разделить на каждое из его отдельных направлений, например так:
верхнее поле: 10 пикселей; нижняя граница: 10px; поле слева: 10px; поле справа: 10px;
Или вы можете указать каждую сторону в одной строке.
Просто помните, что четыре значения представляют верхних , правых , нижних и левых сторон в следующем порядке:
поля: 10px 10px 10px 10px;
Автоматические поля
Другим распространенным и полезным способом использования объявления полей является позволить браузеру самостоятельно определять поля . Это объявление будет выглядеть примерно так:
поле: авто;
Значение auto по-разному действует в разных контекстах, но чаще всего ширина: 150 пикселей; , он больше не будет занимать все доступное ему горизонтальное пространство. Вместо этого это будет выглядеть так:
Давайте попробуем добавить такие объявления полей:
поле: 0 авто 0 авто;
Помните, что это сокращение определяет каждую сторону отдельно — верхняя , правая , нижняя и левая — что мы и делаем, потому что только левой и правой сторонам требуется значение «авто» для центрирования чего-либо.
Конечный результат будет центрирован, например:
Симметричные поля
Допустим, вам нужны поля по 10 пикселей сверху и снизу, а также поля по 20 пикселей слева и справа. Вы можете объявить все четыре значения следующим образом:
margin: 10px 20px 10px 20px;
Вы можете заметить, что это немного повторяется. Поскольку вертикальные и горизонтальные поля симметричны, мы можем упростить это, включив только два значения:
margin: 10px 20px;
Это даст точно такой же результат: 9Поля 0019 10px будут применяться как к верхнему, так и к нижнему краю, а поля 20px будут применяться как к левому, так и к правому краю. Но так как повторений меньше, это визуально чище и легче вносить коррективы.
Этот метод также работает с автоматическими полями. Как вы узнали выше, установка для левого и правого полей значения auto приведет к центрированию элемента по горизонтали. Таким образом, вы можете сделать что-то подобное, чтобы центрировать его по горизонтали, а также установить верхнее и нижнее поля на 0 :
поле: 0 авто;
Сделай сам!
Откройте файл styles.
css в проекте GCF Programming Tutorials в текстовом редакторе и добавим поля. Для лучшего понимания убедитесь, что вы действительно вводите этот код, а не копируете и вставляете его.
- Во-первых, давайте выровняем заголовок с верхней частью страницы . Вы можете видеть серый цвет вокруг него прямо сейчас, потому что браузер выдает каждые 9 секунд.0019 элемент значение поля по умолчанию, но мы можем переопределить это с помощью нашего собственного CSS. Найдите уже созданный набор правил
#headerи добавьте следующее:margin: 0;
- Обратите внимание, что вокруг заголовка и страницы в целом все еще есть полоска серого. Это также связано с тем, что браузер по умолчанию , где браузер добавляет поле около
8pxк основному элементуbody. Давайте также переопределим это, добавив это кmargin: 0;
- Кроме того, поле обзора имеет ширину, которая не позволяет ему занимать все доступное горизонтальное пространство. выглядел бы намного лучше по центру , так что давайте добавим это к набору правил
.review:margin: 0 auto;
- Мы также хотели бы расположить кнопку по центру под обзором . Однако, если бы вы просто добавили поле
: auto;, это пока не сработает. Это потому чтоэлемент кнопкине является элементом уровня блока, а поле: авто;работает только с блочными элементами . К счастью, у вас есть способ изменить и это. Добавьте это в свой набор правилbutton:display: block; поле: 40px авто;
выглядел бы намного лучше по центру , так что давайте добавим это к набору правил Если вы загрузите файл index.html в браузере или обновите страницу, вы должны увидеть веб-страницу, которая выглядит гораздо менее тесной. Контент также будет центрирован благодаря автоматическим полям. Это должно выглядеть примерно так.
Поздравляем, вы только что добавили поля на свою веб-страницу!
ПродолжатьПредыдущая: Блочная модель CSS
Далее:Заполнение в CSS
/en/basic-css/padding-in-css/content/
CSS Margin — javatpoint
следующий → ← предыдущая Свойство CSS Margin используется для определения пространства вокруг элементов. Верхнее, нижнее, левое и правое поля можно изменять независимо друг от друга с помощью отдельных свойств. Вы также можете изменить все свойства сразу, используя сокращенное свойство margin. Существуют следующие свойства поля CSS: Свойства поля CSS
Значения полей CSS Вот некоторые возможные значения свойства поля.
Примечание. Вы также можете использовать отрицательные значения для перекрытия содержимого.Поле CSS ПримерВы можете определить разные поля для разных сторон элемента. <голова> <стиль> п { цвет фона: розовый; } р.ех { поле сверху: 50 пикселей; нижняя граница: 50px; поле справа: 100px; поле слева: 100px; } <тело> Этот абзац не отображается с указанными полями. Этот абзац отображается с указанными полями. Вывод: Этот абзац не отображается с указанным полем. Этот абзац отображается с указанным полем. Поле: сокращенное свойствоСвойство сокращенной записи CSS используется для сокращения кода. Он определяет все свойства полей в одном свойстве. Существует четыре типа указания свойства поля. Вы можете использовать один из них.
1) поле: 50px 100px 150px 200px;Он определяет, что: верхнее значение поля составляет 50 пикселей значение поля справа составляет 100 пикселей нижнее значение поля составляет 150 пикселей значение поля слева составляет 200 пикселей <голова> <стиль> п {
цвет фона: розовый;
}
р. Этот абзац не отображается с указанными полями. Этот абзац отображается с указанными полями. Протестируйте сейчасВывод: Этот абзац не отображается с указанным полем. Этот абзац отображается с указанным полем. 2) поля: 50px 100px 150px;Он определяет, что: верхнее значение поля составляет 50 пикселей значения поля слева и справа равны 100px нижнее значение поля составляет 150 пикселей <голова> <стиль> п { цвет фона: розовый; } р.ех { поля: 50px 100px 150px; } <тело> Этот абзац не отображается с указанными полями. Этот абзац отображается с указанными полями. Протестируйте сейчасВывод: Этот абзац не отображается с указанным полем. Этот абзац отображается с указанным полем. 3) поля: 50px 100px;Он определяет, что: значения полей сверху и снизу равны 50px значения поля слева и справа равны 100px <голова> <стиль> п { цвет фона: розовый; } р.ех { поля: 50px 100px; } <тело> Этот абзац не отображается с указанными полями. Этот абзац отображается с указанными полями. Протестируйте сейчасВывод: Этот абзац не отображается с указанным полем. Этот абзац отображается с указанным полем. 4) поля: 50px;Он определяет, что: верхний правый нижний и левый значения поля 50px <голова> <стиль> п { цвет фона: розовый; } р.ех { поле: 50 пикселей; } <тело> Этот абзац не отображается с указанными полями. |
Он полностью прозрачен и не имеет фонового цвета. Очищает область вокруг элемента.
ех {
поля: 50px 100px 150px 200px;
} <тело>
