Основы работы с CSS

Отступы в СSS

Разбить на страницы
Показывать лекцию целиком

Отступы в CSS определяют пространство вокруг элементов.

Примеры

  • Этот пример показывает, как задать для текста левый отступ.
    <html>
    <head>
    <style type="text/css">
    h1.lf {margin-left: 1cm}
    </style>
    </head>
    
    <body>
    <h1>Заголовок h1 без отступов</h1>
    <h1 class="lf">Заголовок h1 с отступами</h1>
    </body>
    
    </html>
  • Этот пример показывает, как задать для текста правый отступ.
    <html>
    <head>
    <style type="text/css">
    h2.rg {margin-right: 400px}
    </style>
    </head>
    
    <body>
    <h2> Заголовок h2 без отступов </h2>
    <h2 class="rg"> Заголовок h2 с заданным правым отступом</h2>
    </body>
    
    </html>
  • Этот пример показывает, как задать для текста верхний отступ.
    <html>
    <head>
    <style type="text/css">
    h1.tp {margin-top: 50px}
    </style>
    </head>
    
    <body>
    <h1>Заголовок h1 без отступов </h1>
    <h1 class="tp"> Заголовок h1 с заданным верхним отступом</h1>
    </body>
    </html>
  • Этот пример показывает, как задать нижний отступ текста.
    <html>
    <head>
    <style type="text/css">
    h2.btm {margin-bottom: 1cm}
    </style>
    </head>
    
    <body>
    <h2>Заголовок h2 без отступов</h2>
    <h2 class="btm">Заголовок h2 с заданным нижним отступом</h2>
    <h2>Заголовок h2 без отступов</h2>
    </body>
    
    </html>
  • Этот пример показывает, как задать параметры всех отступов в одном объявлении.
    <html>
    <head>
    <style type="text/css">
    h1.all {margin: 1cm 2cm 1cm 2cm}
    </style>
    </head>
    
    <body>
    <h1>Заголовок h1 без отступов</h1>
    <h1 class="all">Заголовок h1 с заданными отступами</h1>
    <h1>Заголовок h1 без отступов</h1>
    </body>
    
    </html>
  • Отступы в CSS

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

    Отступы заданные по умолчанию в браузерах:

    Netscape и Internet Explorer — тег body имеет отступ, равный 8px. Opera вместо этого использует по умолчанию поле величиной 8px.

    Таким образом, если требуется настроить отступы для всей страницы, чтобы они правильно выводились в Opera, то для body необходимо задать также поле!

    Поддерживается следующими браузерами: Internet Explorer, Firefox, Netscape.

    Параметр Описание Значения IE F N W3C
    margin Параметр для задания отступов в одном объявлении margin-top 4 1 4 1
    margin-right
    margin-bottom
    margin-left
    margin-bottom Задает нижний отступ элемента auto 4 1 4 1
    length
    %
    margin-left Задает левый отступ элемента auto 3 1 4 1
    length
    %
    margin-right Задает правый отступ элемента auto 3 1 4 1
    length
    %
    margin-top Задает верхний отступ элемента auto 3 1 4 1
    length
    %

    Отступы в CSS: подробное рассмотрение

    Параметр 'margin'

    Параметр определяет все отступы в одном объявлении. Позволяет определять отрицательные значения.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    margin-top Задают свойства отступов. Значения задаются в % (определяет отступ в % общей высоты/ширины документа), длиной (определяет фиксированный отступ) и автоматически (отступ задает браузер)
    margin-right
    margin-bottom
    margin-left

    Примеры:

    p {margin: 2px}
    все четыре отступа будут иметь отступ, равный 2px.
    
    p {margin: 5px 10%}
    верхний и нижний отступ будут по 5px, 
    левый и правый отступ будут составлять 10% общей ширины документа.
    
    p {margin: 5px 10% -2px}
    верхний отступ будет равен 5px, 
    левый и правый отступ будут составлять 10% общей ширины документа, 
    нижний отступ будет равен 2px.
    
    p {margin: 5px 10% -2px auto}
    верхний отступ будет 5px, 
    правый отступ будет составлять 10% общей ширины документа, 
    нижний отступ будет 2px, левый отступ будет задан браузером.

    Параметр 'margin-bottom'

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

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    Auto Нижний отступ задает браузер
    Length Определяет фиксированный нижний отступ
    % Определяет нижний отступ в % от общей высоты документа

    Примеры:

    p
    { 
    margin-bottom: 5%
    }
    
    p
    { 
    margin-bottom: auto
    }

    Параметр 'margin-left'

    Этот параметр задает левый отступ элемента. Позволяет определять отрицательные значения.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    Auto Левый отступ задает браузер
    Length Определяет левый отступ фиксированной ширины
    % Определяет левый отступ в % общей ширины документа

    Примеры:

    p
    { 
    margin-left: 2%
    }
    
    p
    { 
    margin-left: -5px
    }

    Параметр 'margin-right'

    Этот параметр задает правый отступ элемента. Позволяет определять отрицательные значения.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    Auto Правый отступ задает браузер
    Length Определяет правый отступ фиксированной величины
    % Определяет правый отступ в % общей ширины документа

    Примеры:

    p
    { 
    margin-right: 2px
    }
    
    p
    { 
    margin-right: 10%
    }

    Параметр 'margin-top'

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

    Наследование: нет.

    Возможные значения:

    Значение Описание
    Auto Верхний отступ задает браузер
    Length Определяет верхний отступ фиксированной ширины
    % Определяет верхний отступ в % от общей высоты документа

    Примеры:

    p
    { 
    margin-top: auto
    }
    
    p
    { 
    margin-top: -5px
    }
    Страницы:

    Отступы в CSS определяют пространство вокруг элементов.

    Примеры

  • Этот пример показывает, как задать для текста левый отступ.
    <html>
    <head>
    <style type="text/css">
    h1.lf {margin-left: 1cm}
    </style>
    </head>
    
    <body>
    <h1>Заголовок h1 без отступов</h1>
    <h1 class="lf">Заголовок h1 с отступами</h1>
    </body>
    
    </html>
  • Этот пример показывает, как задать для текста правый отступ.
    <html>
    <head>
    <style type="text/css">
    h2.rg {margin-right: 400px}
    </style>
    </head>
    
    <body>
    <h2> Заголовок h2 без отступов </h2>
    <h2 class="rg"> Заголовок h2 с заданным правым отступом</h2>
    </body>
    
    </html>
  • Этот пример показывает, как задать для текста верхний отступ.
    <html>
    <head>
    <style type="text/css">
    h1.tp {margin-top: 50px}
    </style>
    </head>
    
    <body>
    <h1>Заголовок h1 без отступов </h1>
    <h1 class="tp"> Заголовок h1 с заданным верхним отступом</h1>
    </body>
    </html>
  • Этот пример показывает, как задать нижний отступ текста.
    <html>
    <head>
    <style type="text/css">
    h2.btm {margin-bottom: 1cm}
    </style>
    </head>
    
    <body>
    <h2>Заголовок h2 без отступов</h2>
    <h2 class="btm">Заголовок h2 с заданным нижним отступом</h2>
    <h2>Заголовок h2 без отступов</h2>
    </body>
    
    </html>
  • Этот пример показывает, как задать параметры всех отступов в одном объявлении.
    <html>
    <head>
    <style type="text/css">
    h1.all {margin: 1cm 2cm 1cm 2cm}
    </style>
    </head>
    
    <body>
    <h1>Заголовок h1 без отступов</h1>
    <h1 class="all">Заголовок h1 с заданными отступами</h1>
    <h1>Заголовок h1 без отступов</h1>
    </body>
    
    </html>
  • Отступы в CSS

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

    Отступы заданные по умолчанию в браузерах:

    Netscape и Internet Explorer — тег body имеет отступ, равный 8px. Opera вместо этого использует по умолчанию поле величиной 8px.

    Таким образом, если требуется настроить отступы для всей страницы, чтобы они правильно выводились в Opera, то для body необходимо задать также поле!

    Поддерживается следующими браузерами: Internet Explorer, Firefox, Netscape.

    Параметр Описание Значения IE F N W3C
    margin Параметр для задания отступов в одном объявлении margin-top 4 1 4 1
    margin-right
    margin-bottom
    margin-left
    margin-bottom Задает нижний отступ элемента auto 4 1 4 1
    length
    %
    margin-left Задает левый отступ элемента auto 3 1 4 1
    length
    %
    margin-right Задает правый отступ элемента auto 3 1 4 1
    length
    %
    margin-top Задает верхний отступ элемента auto 3 1 4 1
    length
    %

    Отступы в CSS: подробное рассмотрение

    Параметр 'margin'

    Параметр определяет все отступы в одном объявлении. Позволяет определять отрицательные значения.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    margin-top Задают свойства отступов. Значения задаются в % (определяет отступ в % общей высоты/ширины документа), длиной (определяет фиксированный отступ) и автоматически (отступ задает браузер)
    margin-right
    margin-bottom
    margin-left

    Примеры:

    p {margin: 2px}
    все четыре отступа будут иметь отступ, равный 2px.
    
    p {margin: 5px 10%}
    верхний и нижний отступ будут по 5px, 
    левый и правый отступ будут составлять 10% общей ширины документа.
    
    p {margin: 5px 10% -2px}
    верхний отступ будет равен 5px, 
    левый и правый отступ будут составлять 10% общей ширины документа, 
    нижний отступ будет равен 2px.
    
    p {margin: 5px 10% -2px auto}
    верхний отступ будет 5px, 
    правый отступ будет составлять 10% общей ширины документа, 
    нижний отступ будет 2px, левый отступ будет задан браузером.

    Параметр 'margin-bottom'

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

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    Auto Нижний отступ задает браузер
    Length Определяет фиксированный нижний отступ
    % Определяет нижний отступ в % от общей высоты документа

    Примеры:

    p
    { 
    margin-bottom: 5%
    }
    
    p
    { 
    margin-bottom: auto
    }

    Параметр 'margin-left'

    Этот параметр задает левый отступ элемента. Позволяет определять отрицательные значения.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    Auto Левый отступ задает браузер
    Length Определяет левый отступ фиксированной ширины
    % Определяет левый отступ в % общей ширины документа

    Примеры:

    p
    { 
    margin-left: 2%
    }
    
    p
    { 
    margin-left: -5px
    }

    Параметр 'margin-right'

    Этот параметр задает правый отступ элемента. Позволяет определять отрицательные значения.

    Наследование: нет.

    Может принимать следующие значения:

    Значение Описание
    Auto Правый отступ задает браузер
    Length Определяет правый отступ фиксированной величины
    % Определяет правый отступ в % общей ширины документа

    Примеры:

    p
    { 
    margin-right: 2px
    }
    
    p
    { 
    margin-right: 10%
    }

    Параметр 'margin-top'

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

    Наследование: нет.

    Возможные значения:

    Значение Описание
    Auto Верхний отступ задает браузер
    Length Определяет верхний отступ фиксированной ширины
    % Определяет верхний отступ в % от общей высоты документа

    Примеры:

    p
    { 
    margin-top: auto
    }
    
    p
    { 
    margin-top: -5px
    }
    Вернуться к учебному плану