Последние учебники веб-разработки
×

CSS Руководство

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

CSS3 Введение CSS3 Закругленные углы CSS3 Пограничные изображения CSS3 Фон CSS3 Цвета CSS3 Градиенты CSS3 Тени CSS3 Текст CSS3 шрифты CSS3 2D Трансформации CSS3 3D Трансформации CSS3 Переходы CSS3 Анимации CSS3 Изображений CSS3 Кнопки CSS3 пагинация CSS3 Несколько столбцов CSS3 Пользовательский интерфейс CSS3 Box Определение размеров CSS3 Flexbox CSS3 Медиа-запросы CSS3 Примеры MQ

CSS Адаптивный веб-дизайн

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

CSS Примеры CSS викторина CSS сертификат

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

CSS Маржа


CSS Margin Свойства

В CSS margin свойства используются для создания пространства вокруг элементов.

В margin свойства устанавливают размер пустого пространства снаружи границы.

Этот элемент имеет margin по 80px.


CSS Margins

В CSS margin свойства устанавливают размер пустого пространства снаружи границы.

ЗаметкаПримечание: margins являются полностью прозрачными - и не может иметь цвет фона!

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


Margin - Отдельные Стороны

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

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

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

  • auto - браузер вычисляет margin
  • длина - определяет margin в px, pt, cm и т.д.
  • % - Задает margin в% от ширины содержащего элемента
  • унаследовать - указывает , что margin должен быть унаследован от родительского элемента
ЗаметкаПримечание: Кроме того , можно использовать отрицательные значения для margins ;чтобы перекрывать содержимое.

Следующий пример устанавливает различные margins для всех четырех сторон <p> элемента:

пример

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
Попробуй сам "

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

пример

div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}
Попробуй сам "

Margin - сокращённое свойство

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

margin свойство свойство является обобщающим для следующих индивидуальных margin свойств:

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

пример

p {
    margin: 100px 150px 100px 80px;
}
Попробуй сам "

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

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

  • margin : 25px 50px 75px 100px;
    • верхнее поле 25px
    • правое поле 50px
    • нижнее поле составляет 75px
    • левое поле является 100px

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

  • margin : 25px 50px 75px;
    • верхнее поле 25px
    • правое и левое поля являются 50px
    • нижнее поле составляет 75px

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

  • margin : 25px 50px;
    • верхнее и нижнее поля являются 25px
    • правое и левое поля являются 50px

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

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

Использование The Автозначением

Вы можете установить margin свойство auto горизонтально центрировать элемент внутри контейнера.

Элемент будет занимать указанную ширину, а остальное пространство будет разделено поровну между левым и правым margins :

пример

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}
Попробуй сам "

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»


Все свойства CSS Маржа

Имущество Описание
margin Сокращённое свойство для установки margin свойств в одной декларации
margin-bottom Устанавливает нижний margin элемента
margin-left Устанавливает левый margin элемента
margin-right Устанавливает правый margin элемента
margin-top Устанавливает верхний margin элемента