Отступ css: Отступы | htmlbook.ru

margin-bottom | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
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 1CSS 2CSS 2.1CSS 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 ExplorerChromeOperaSafariFirefoxAndroidiOS
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 1CSS 2CSS 2.1CSS 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 для каждого элемента

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

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

    элемент значение поля по умолчанию, но мы можем переопределить это с помощью нашего собственного CSS. Найдите уже созданный набор правил #header и добавьте следующее:  
     margin: 0; 
  2. Обратите внимание, что вокруг заголовка и страницы в целом все еще есть полоска серого. Это также связано с тем, что браузер по умолчанию , где браузер добавляет поле около 8px к основному элементу body . Давайте также переопределим это, добавив это к
    body
    набор правил, который вы уже создали: 
     margin: 0; 
  3. Кроме того, поле обзора имеет ширину, которая не позволяет ему занимать все доступное горизонтальное пространство. выглядел бы намного лучше по центру , так что давайте добавим это к набору правил .review :
     margin: 0 auto; 
  4. Мы также хотели бы расположить кнопку по центру под обзором . Однако, если бы вы просто добавили поле : 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

Вот некоторые возможные значения свойства поля.

Значение Описание
авто Позволяет браузеру рассчитать маржу.
длина Используется для указания поля в точках, пикселях, см и т. д. Значение по умолчанию — 0 пикселей.
% Используется для определения поля в процентах от ширины содержащего элемента.
унаследовать Используется для наследования полей от родительского элемента.
Примечание. Вы также можете использовать отрицательные значения для перекрытия содержимого.

Поле CSS Пример

Вы можете определить разные поля для разных сторон элемента.

<голова> <стиль> п { цвет фона: розовый; } р.ех { поле сверху: 50 пикселей; нижняя граница: 50px; поле справа: 100px; поле слева: 100px; } <тело>

Этот абзац не отображается с указанными полями.

Этот абзац отображается с указанными полями.

Протестируйте сейчас

Вывод:

Этот абзац не отображается с указанным полем.

Этот абзац отображается с указанным полем.


Поле: сокращенное свойство

Свойство сокращенной записи CSS используется для сокращения кода. Он определяет все свойства полей в одном свойстве.

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

  1. поля: 50px 100px 150px 200px;
  2. поля: 50px 100px 150px;
  3. поле
  4. : 50px 100px;
  5. поле 50px;

1) поле: 50px 100px 150px 200px;

Он определяет, что:

верхнее значение поля составляет 50 пикселей

значение поля справа составляет 100 пикселей

нижнее значение поля составляет 150 пикселей

значение поля слева составляет 200 пикселей

<голова> <стиль> п { цвет фона: розовый; } р. ех { поля: 50px 100px 150px 200px; } <тело>

Этот абзац не отображается с указанными полями.

Этот абзац отображается с указанными полями.

Протестируйте сейчас

Вывод:

Этот абзац не отображается с указанным полем.

Этот абзац отображается с указанным полем.


2) поля: 50px 100px 150px;

Он определяет, что:

верхнее значение поля составляет 50 пикселей

значения поля слева и справа равны 100px

нижнее значение поля составляет 150 пикселей

<голова> <стиль> п { цвет фона: розовый; } р.ех { поля: 50px 100px 150px; } <тело>

Этот абзац не отображается с указанными полями.

Этот абзац отображается с указанными полями.

Протестируйте сейчас

Вывод:

Этот абзац не отображается с указанным полем.

Этот абзац отображается с указанным полем.


3) поля: 50px 100px;

Он определяет, что:

значения полей сверху и снизу равны 50px

значения поля слева и справа равны 100px

<голова> <стиль> п { цвет фона: розовый; } р.ех { поля: 50px 100px; } <тело>

Этот абзац не отображается с указанными полями.

Этот абзац отображается с указанными полями.

Протестируйте сейчас

Вывод:

Этот абзац не отображается с указанным полем.

Этот абзац отображается с указанным полем.


4) поля: 50px;

Он определяет, что:

верхний правый нижний и левый значения поля 50px

<голова> <стиль> п { цвет фона: розовый; } р.ех { поле: 50 пикселей; } <тело>

Этот абзац не отображается с указанными полями.

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

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