Перейти к содержимому

Как сделать отступ в css от края страницы

  • автор:

margin

Свойство, которым можно отодвинуть элемент от соседей. Или придвинуть.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Примеры
  3. Как понять
  4. Как пишется
  5. Подсказки
  6. На практике
    1. Дока Дог советует
    2. Егор Левченко советует
    3. Алёна Батицкая советует

    Контрибьюторы:

    • Алёна Батицкая ,
    • Егор Левченко

    Обновлено 6 октября 2022

    Кратко

    Скопировать ссылку «Кратко» Скопировано

    Задаёт размер внешнего отступа вокруг элемента. Иногда внешние отступы называют полями.

    Чтобы сделать отступ только с одной стороны, используй margin — top (сверху), margin — right (справа), margin — bottom (снизу) или margin — left (слева).

    Или более современные margin — inline — start , margin — inline — end , margin — block — start и margin — block — end .

    Примеры

    Скопировать ссылку «Примеры» Скопировано

    Применяется ко всем четырём сторонам:

     .selector  margin: 1em; margin: -3px;> .selector  margin: 1em; margin: -3px; >

    Сверху и снизу | слева и справа:

     .selector  margin: 5% auto;> .selector  margin: 5% auto; >

    Сверху | слева и справа | снизу:

     .selector  margin: 1em auto 2em;> .selector  margin: 1em auto 2em; >

    Сверху | справа | снизу | слева:

     .selector  margin: 2px 1em 0 auto;> .selector  margin: 2px 1em 0 auto; >

    Как понять

    Скопировать ссылку «Как понять» Скопировано

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

    Отрицательное значение margin тоже возможно: вместо отступа, оно, наоборот, ставит элемент ближе к соседнему.

    Можно задать margin с помощью одного, двух, трёх или четырёх значений. В зависимости от этого, отступ появится для всех или только для указанных сторон:

    • Если указать одно значение (например, margin : 1px; ), отступ в 1 пиксель появится со всех сторон;
    • Если указать два ( margin : 5 % auto; ), первое значение применится для верхнего и нижнего отступа, а второе для левого и правого;
    • При трёх значениях ( margin : 1em auto 2em; ) первое делает отступ сверху, второе — слева и справа, третье — снизу;
    • Если указать четыре значения ( margin : 2px 1em 0 auto; ), они применятся по часовой стрелке для каждой из сторон: сверху, справа, снизу и слева.

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

    Размер отступа margin можно задать в такими значениями:

    Число с единицами измерения — фиксированный отступ в пикселях px или других единицах.

    Проценты — отступ в процентах % от ширины блока.

    auto — браузер сам выбирает подходящий размер отступа. Например, можно использовать в некоторых случаях, чтобы центровать элемент.

    Подсказки

    Скопировать ссылку «Подсказки» Скопировано

    �� Свойство margin создаёт пространство вокруг элемента, в то время, как padding добавляет пространство внутри элемента.

    �� margin задаёт расстояние от края элемента до родительского элемента, а если такого нет, то до края окна браузера. По умолчанию браузерное окно имеет свои отступы внутри; чтобы от них избавиться, добавь в значение margin : 0 .

    На практике

    Скопировать ссылку «На практике» Скопировано

    Дока Дог советует

    Скопировать ссылку «Дока Дог советует» Скопировано

    �� margin тот ещё непредсказуемый чёрт. Слева и справа работает адекватно, даже в строчных элементах. Но стоит сделать margin — top — так будь готов к сюрпризам. К примеру, все строчные элементы, то есть display : inline , вообще не учтут твой отступ сверху и снизу. Блочные тоже могут сработать, а могут и нет: в зависимости от родителя. Единственное, где в margin — top и margin — bottom можно быть уверенным — это в элементах с position : absolute и position : fixed — уж там margin точно не сможет тебя обмануть.

    Егор Левченко советует

    Скопировать ссылку «Егор Левченко советует» Скопировано

    �� Чтобы упростить работу лучше всего использовать и padding (для внутренних отступов внутри блока) и margin для внешних отступов элемента внутри блока. Например, если у вас указаны корректные padding -отступы, то вам не придётся использовать margin — top для отступа от верхнего края для первого элемента.

    После того, как вы задали внутренние отступы, всегда используйте один и тот же margin для вертикальных отступов. Отступ сверху из-за установленных внутренних padding -отступов у блока вам больше не нужен, поэтому пользуйтесь margin — bottom для отступов между элементами. Вы же пишете сверху вниз, правда? Тогда вам всегда будет понятно, почему тот или иной элемент находятся не там, где вам хочется.

    Конечно, никто не запрещает использовать и популярное: margin : 0 auto; для центрирования элемента по строке.

    Алёна Батицкая советует

    Скопировать ссылку «Алёна Батицкая советует» Скопировано

    �� Очень частый приём, который используется в вёрстке — выравнивание блочного элемента по центру родителя при помощи margin : 0 auto .

    Предположим, есть основная колонка контента, которая должна находится по центру окна браузера. Для этого потребуется ограничить ширину колонки. Например, задать width : 80 % . Зачем? Потому что все блочные элементы по умолчанию имеют ширину 100%. Если не будет свободного места, то отцентрировать элемент не получится.

    Теперь, когда у элемента появилось свободное место, можно применить к нему свойство margin : 0 auto . За счёт ключевого слова auto по бокам элемента будут равные внешние отступы, выравнивающие элемент по центру. В данном случае слева и справа отступ будет равен (100% — 80%) / 2 = 10%. Получается, размер, оставшийся после вычитания ширины элемента из 100%, делится на 2.

    Причём боковые отступы будут гибкими. Если задать ширину элемента в пикселях, а затем выровнять при помощи margin — боковые отступы будут тянуться в зависимости от ширины окна браузера.

    �� Начинающие разработчики часто злоупотребляют отрицательными отступами. Это очень плохая практика.

    Представь, что ты делаешь перестановку в доме и решаешь поставить обеденный стол на 20 сантиметров над полом и на пол метра в стену. На сколько это будет логично и удобно?

    Аналогично с элементами и отрицательными отступами. Если написан отрицательный отступ, то в 98% случаев это повод поискать ошибку в своей разметке или стилях.

    Отрицательный отступ обоснован только если нужно разместить один элемент чуть-чуть поверх другого. В этом случае да, самый простой способ реализовать наложение — такой тип отступа. В другим случаях это просто поломка естественного потока документа ����

    margin-left

    Свойство CSS margin-left устанавливает внешний отступ слева от элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное — сокращает.

    Интерактивный пример

    Вертикальные внешние отступы двух соседних блоков могут схлопнуться. Это называется схлопыванием внешних отступов.

    В редких случаях, когда ширина (т.е., когда все значения width , margin-left , border , padding , область содержимого, и margin-right определены), margin-left игнорируется, и будет иметь такое же расчётное значение, как и auto .

    Синтаксис

    /* Ключевые слова */ margin-left: auto; /* Значения длины */ margin-left: 10px; /* абсолютная длина */ margin-left: 1em; /* относительно размера текста */ margin-left: 5%; /* относительно ширины родительского блока */ /* Глобальные значения */ margin-left: inherit; margin-left: initial; margin-left: unset;

    Свойство margin-left может быть выражено как ключевое слово auto , как , или как . Значение может быть положительным, нулевым или отрицательным.

    Значения

    : Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto , расчётное пространство распределяется равномерно. Эта таблица кратко излагает различные: Значение display Значение float Значение position Расчётное значение auto Комментарий
    inline , inline-block , inline-table любое static или relative 0 Строчный способ разметки
    block , inline , inline-block , block , table , inline-table , list-item , table-caption любое static или relative 0 , кроме случаев, когда margin-left и margin-right установлены как auto . В этом случае устанавливается значение, центрирующее элемент внутри его родителя Блочный способ разметки
    block , inline , inline-block , block , table , inline-table , list-item , table-caption left или right static или relative 0 Блочный способ разметки (плавающие элементы)
    любое table-* , кроме table-caption любое любое 0 Внутренние table-* элементы не имеют отступов, вместо этого используйте border-spacing (en-US)
    любое, кроме flex , inline-flex , или table-* любое fixed или absolute 0 , кроме случаев, когда margin-left и margin-right установлены как auto . В этом случае, устанавливается значение центрирующее границы области внутри доступной width (ширины), если значение фиксировано. Способ разметки абсолютным позиционированием
    flex , inline-flex любое любое 0 , кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным auto отступам. Способ разметки с помощью flexbox

    Формальный синтаксис

    margin-left =
    | (en-US)
    auto

    =
    | (en-US)

    Примеры

    .content  margin-left: 5%; > .sidebox  margin-left: 10px; > .logo  margin-left: -5px; >

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

    Specification
    CSS Box Model Module Level 3
    # margin-physical
    Начальное значение 0
    Применяется к все элементы, кроме элементов с табличным типом display , отличным от table-caption , table и inline-table . Это также применяется к ::first-letter и ::first-line .
    Наследуется нет
    Проценты ссылается на ширину содержащего блока
    Обработка значения процент, как указан, или абсолютная длина
    Animation type длина

    Совместимость с браузерами

    BCD tables only load in the browser

    Found a content problem with this page?

    • Edit the page on GitHub.
    • Report the content issue.
    • View the source on GitHub.

    This page was last modified on 6 янв. 2024 г. by MDN contributors.

    Your blueprint for a better internet.

    MDN

    Support

    • Product help
    • Report an issue

    Our communities

    Developers

    • Web Technologies
    • Learn Web Development
    • MDN Plus
    • Hacks Blog
    • Website Privacy Notice
    • Cookies
    • Legal
    • Community Participation Guidelines

    Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
    Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

    margin-right

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

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

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

    Синтаксис

    margin-right: значение | auto | inherit

    Значения

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

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

    HTML5 CSS2.1 IE Cr Op Sa Fx

        margin-right

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

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

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

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

    [window.]document.getElementById(» elementID «).style.marginRight

    Браузеры

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

    Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

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

    Устанавливает величину отступа от каждого края элемента.

    margin-bottom

    Устанавливает величину отступа от нижнего края элемента.

    margin-left

    Устанавливает величину отступа от левого края элемента.

    margin-right

    Устанавливает величину отступа от правого края элемента.

    margin-top

    Устанавливает величину отступа от верхнего края элемента.

    padding

    Устанавливает значение полей вокруг содержимого элемента.

    padding-block

    Определяет начальный и конечный внутренние отступы элемента по блочной оси.

    padding-block-end

    Определяет конечный внутренний отступ элемента по блочной оси.

    padding-block-start

    Определяет начальный внутренний отступ элемента по блочной оси.

    padding-bottom

    Устанавливает значение поля от нижнего края содержимого элемента.

    padding-inline

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

    padding-inline-end

    Определяет конечный внутренний отступ элемента по строчной оси.

    padding-inline-start

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

    padding-left

    Устанавливает значение поля от левого края содержимого элемента.

    padding-right

    Устанавливает значение поля от правого края содержимого элемента.

    padding-top

    Устанавливает значение поля от верхнего края содержимого элемента.

    Справочник CSS

    • !important
    • ::after
    • ::backdrop
    • ::before
    • ::first-letter
    • ::first-line
    • ::marker
    • ::placeholder
    • ::selection
    • :active
    • :blank
    • :buffering
    • :checked
    • :default
    • :dir
    • :disabled
    • :empty
    • :enabled
    • :first-child
    • :first-of-type
    • :focus
    • :focus-within
    • :fullscreen
    • :hover
    • :in-range
    • :indeterminate
    • :invalid
    • :is()
    • :lang()
    • :last-child
    • :last-of-type
    • :link
    • :muted
    • :not()
    • :nth-child()
    • :nth-last-child()
    • :nth-last-of-type()
    • :nth-of-type()
    • :only-child
    • :only-of-type
    • :optional
    • :out-of-range
    • :paused
    • :placeholder-shown
    • :playing
    • :read-only
    • :read-write
    • :required
    • :root
    • :seeking
    • :stalled
    • :target
    • :valid
    • :visited
    • :volume-locked
    • @charset
    • @document
    • @font-face
    • @import
    • @keyframes
    • @media
    • @page
    • @supports
    • @viewport
    • accent-color
    • align-content
    • align-items
    • align-self
    • all
    • animation
    • animation-delay
    • animation-direction
    • animation-duration
    • animation-fill-mode
    • animation-iteration-count
    • animation-name
    • animation-play-state
    • animation-timing-function
    • aspect-ratio
    • backdrop-filter
    • backface-visibility
    • background
    • background-attachment
    • background-blend-mode
    • background-clip
    • background-color
    • background-image
    • background-origin
    • background-position
    • background-position-x
    • background-position-y
    • background-repeat
    • background-size
    • block-size
    • border
    • border-bottom
    • border-bottom-color
    • border-bottom-left-radius
    • border-bottom-right-radius
    • border-bottom-style
    • border-bottom-width
    • border-collapse
    • border-color
    • border-image
    • border-left
    • border-left-color
    • border-left-style
    • border-left-width
    • border-radius
    • border-right
    • border-right-color
    • border-right-style
    • border-right-width
    • border-spacing
    • border-style
    • border-top
    • border-top-color
    • border-top-left-radius
    • border-top-right-radius
    • border-top-style
    • border-top-width
    • border-width
    • bottom
    • box-decoration-break
    • box-shadow
    • box-sizing
    • caption-side
    • caret-color
    • clear
    • clip
    • color
    • column-count
    • column-fill
    • column-gap
    • column-rule
    • column-rule-color
    • column-rule-style
    • column-rule-width
    • column-span
    • column-width
    • columns
    • content
    • counter-increment
    • counter-reset
    • cursor
    • direction
    • display
    • empty-cells
    • filter
    • flex
    • flex-basis
    • flex-direction
    • flex-flow
    • flex-grow
    • flex-shrink
    • flex-wrap
    • float
    • font
    • font-family
    • font-kerning
    • font-size
    • font-stretch
    • font-style
    • font-variant
    • font-weight
    • gap
    • height
    • hyphenate-character
    • hyphenate-limit-chars
    • hyphens
    • image-rendering
    • justify-content
    • left
    • letter-spacing
    • line-clamp
    • line-height
    • list-style
    • list-style-image
    • list-style-position
    • list-style-type
    • margin
    • margin-bottom
    • margin-left
    • margin-right
    • margin-top
    • marks
    • max-height
    • max-width
    • min-height
    • min-width
    • mix-blend-mode
    • object-fit
    • opacity
    • order
    • orphans
    • outline
    • outline-color
    • outline-offset
    • outline-style
    • outline-width
    • overflow
    • overflow-x
    • overflow-y
    • padding
    • padding-block
    • padding-block-end
    • padding-block-start
    • padding-bottom
    • padding-inline
    • padding-inline-end
    • padding-inline-start
    • padding-left
    • padding-right
    • padding-top
    • page-break-after
    • page-break-before
    • page-break-inside
    • perspective
    • perspective-origin
    • place-content
    • pointer-events
    • position
    • quotes
    • resize
    • right
    • row-gap
    • scroll-behavior
    • tab-size
    • table-layout
    • text-align
    • text-align-last
    • text-decoration
    • text-decoration-color
    • text-decoration-line
    • text-decoration-skip-ink
    • text-decoration-style
    • text-emphasis
    • text-emphasis-color
    • text-emphasis-position
    • text-emphasis-style
    • text-fill-color
    • text-indent
    • text-orientation
    • text-overflow
    • text-shadow
    • text-stroke
    • text-stroke-color
    • text-stroke-width
    • text-transform
    • top
    • transform
    • transform-origin
    • transform-style
    • transition
    • transition-delay
    • transition-duration
    • transition-property
    • transition-timing-function
    • unicode-bidi
    • user-select
    • vertical-align
    • visibility
    • white-space
    • widows
    • width
    • word-break
    • word-spacing
    • word-wrap
    • writing-mode
    • z-index
    • zoom
    Похожие публикации:
    1. Как в ворде сделать подчеркнутую строку для заполнения
    2. Как отменить действие в заметках
    3. Как сделать pdf как будто отсканированный
    4. Питон как сделать всплывающее окно pyqt

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

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