Css margin

Margin-top не работает?

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

Эта проблема известна как схлопывание полей.

Представим, что один элемент расположен внутри другого. Если назначить внутреннему блоку, то он появится у внешнего, а отступ потомка от родителя не изменится.

Есть целых 6 решений этой проблемы (но не все из них хороши).

display: inline-block для дочернего элемента;
display: inline-block для родительского элемента;
overflow: hidden для родительского элемента;
position: absolute для родительского элемента;
установка прозрачной рамки для родителя;
установка верхнего паддинга для родителя (можно использовать очень маленькие значения, десятые доли пикселя).

Первый и второй способ решают проблему за счет того, что один из элементов перестает быть блочным. Проблема схлопывания актуальна только для этого типа отображения.

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

Третье и четвертое решение неочевидны и имеют свои подводные камни, поэтому по возможности лучше их не использовать. Отмена стандартного схлопывания в этих случаях является побочным эффектом.

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

Центрирование абсолютно позиционированных элементов

Так как для абсолютно позиционированных элементов введено исключение, можно использовать значение auto, чтобы выровнять их по центру вертикально и горизонтально. Но сначала нужно выяснить, когда margin:auto будет работать именно так для отступа сверху CSS.

В другой спецификации W3C сказано:

«Если для всех трех позиций (“left”, “width” и “right”) задано значение «auto», сначала установите 0 для “margin-left” и “margin-right…» » Если «auto» задано только для “margin-left” и “margin-right», тогда решите уравнение с дополнительным условием, чтобы для обоих отступов была задана одинаковая ширина».

Здесь довольно подробно описана ситуация, касающаяся значения auto для горизонтальных отступов. Чтобы эти отступы имели одинаковый размер, для left, width и right не должно задаваться значение auto (их значение по умолчанию). Чтобы отцентрировать элемент по горизонтали, нужно задать определенное значение для ширины абсолютно позиционируемого элемента, а left и right при этом должны иметь равные значения.

В спецификации также упоминается что-то подобное и для отступов сверху CSS div.

«Если для «top», «height» и «bottom» задано значение «auto» , установите для «top» позицию static…»

«Если для одной из трех позиций не установлено значение «auto»: если для «top» и «bottom» установлено значение «auto», решите уравнение с дополнительным условием, чтобы задать для этих отступов одинаковые значения».

Следовательно, чтобы отцентрировать по вертикали абсолютно позиционируемый элемент top, height и bottom не должны иметь значение auto.

Теперь, объединив все это, мы получим следующее:

Двойной отступ для элементов с установленным свойством float

Воспроизвети эту ошибку очень просто. Устанавливаем элементу float: left а затем внешний отступ. В результате получаем отступ в два раза больше указанного.

Рассмотрим пример:

#element{
background: #95CFEF;
width: 300px;
height: 100px;
float: left;
margin: 30px 0 0 30px;
border: solid 1px #36F;
}

Ожидаемый результат:

Однако в IE6 мы увидем следующее:

Исправляем

Исправляется это таким же образом как и проблема с эффектом ступенек. То есть устанавливаем свойство display: inline для элемента. Наш код изменится так:

#element{
background: #95CFEF;
width: 300px;
height: 100px;
float: left;
margin: 30px 0 0 30px;
border: solid 1px #36F;
display: inline;

}

По горизонтали

Является ли элемент строчным или строчно-* (как текст или ссылки)?

Строчные элементы внутри родительского блочного можно центрировать так:

.center-children {
  text-align: center;
}

Это сработает для элементов с типом отображения , , , и т.д.

Является ли элемент блочным?

Блочный элемент можно центрировать, указав для и значение (а также прописав для него конкретный , иначе он займёт всю ширину родительского контейнера и не будет нуждаться в центрировании). Для этого часто используют сокращённую запись:

.center-me {
  margin: 0 auto;
}

Способ работает независимо от ширины центрируемого блочного элемента и его родителя.

Обратите внимание, что заставить элемент плавать по центру с помощью нельзя. Хотя есть одна хитрость

Вам нужно центрировать несколько блочных элементов?

Если вы имеете дело с двумя и больше блочными элементами, размещёнными в ряд, которые нужно центрировать по горизонтали, возможно, вам потребуется изменить тип . Вот что произойдёт, если указать для них тип отображения или применить flexbox:

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

Поля и ключевое слово auto

Полями (внешними отступами) чаще всего пользуются для горизонтальной центровки элементов, ширина которых известна.

Рассмотрим пример.

Элемент, который надо выровнять по центру

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

Обратимся к спецификации CSS:

Если свойства ‘margin-left’ и ‘margin-right’ установлены в значение ‘auto’, ширина полей оказывается одинаковой. Это приводит к горизонтальной центровке элемента относительно краёв включающего его в себя блока.

Поля элемента имеют одинаковую ширину

Вот демонстрация этого примера.

▍Использование свойства margin: auto для абсолютно позиционированных элементов

Центрованный элемент

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

Для того чтобы свойство позволило бы нам соответствующим образом выровнять элемент, нужно, чтобы были бы выполнены следующие условия:

Заданы ширина и высота элемента.
Задано свойство элемента .

Вот HTML-разметка:

Вот код стилей:

Вот демонстрация этой методики выравнивания элементов.

Свойство margin = «0»

Начнем изучение margin, когда margin = «0» или вообще отсутствует!

Для этого нам понадобится какой-то блок на всю ширину нашей страницы, чтобы его увидеть добавим ему бордюр, установим высоту, ну к примеру, 300px.

width: 100%;

height: 200px;

border: 1px solid black;

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

width: 100px;

height: 20px;

border: 1px solid red;

И получим два блока, один внутри другого:

</div>

Результат:

Наш блок.

Как центрировать Div в CSS

Вы можете центрировать div несколькими способами в CSS. Хотя легко центрировать div по горизонтали на странице, сложнее сделать это по вертикали (но все же управляемо!). Мы рассмотрим оба этих метода ниже, а затем объясним, как вы можете центрировать div внутри другого div.

Примеры, включенные во всем построены на w3schools игровой Tryit редактор. Вы можете щелкнуть любую ссылку на источник, чтобы просмотреть пример полностью.

Как центрировать Div по горизонтали

Чтобы центрировать div по горизонтали на странице, просто установите для ширины элемента и свойства поля значение auto. Таким образом, div будет занимать любую ширину, указанную в CSS, а браузер будет гарантировать, что оставшееся пространство разделено поровну между двумя полями.

Давайте взглянем на базовый пример блочной модели CSS с горизонтально центрированным элементом div.

Допустим, вы хотите создать элемент div с коротким абзацем внутри и желтой рамкой вокруг него. В вашем HTML вы должны дать div имя класса, например «center». Затем вы можете использовать селектор CSS .center, чтобы задать для него стиль с помощью свойств поля, ширины, границы и заполнения.

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

Вот CSS:

Вот HTML:

Вот результат:

Как центрировать Div по вертикали

Чтобы центрировать div по вертикали на странице, вы можете использовать свойство CSS position, свойства left и top и свойство transform. Начните с установки абсолютного положения div, чтобы он был исключен из обычного потока документов.

Затем установите свойства left и top на 50%. Это указывает браузеру выровнять левый и верхний край div с центром страницы по горизонтали и вертикали (т.е. 50% вправо и вниз по странице). Вот в чем проблема: если края блока div выровнены по центру страницы, он будет выглядеть не по центру. Вот пример.

Чтобы действительно центрировать div, вам нужно определить последнее свойство, известное как свойство преобразования CSS. Хотя существует девять различных методов преобразования (и это даже не включает 3D-преобразования), вы хотите использовать метод translate() для перемещения div по осям X и Y. В частности, вы хотите переместить div на 50% влево и вверх от его текущей позиции. Это скажет браузеру поместить центр div в центр страницы.

Давайте посмотрим на код, который вам нужно написать.

Вот CSS:

Вот HTML:

Вот результат:

Как центрировать Div внутри Div

Вы можете центрировать дочерний элемент div внутри родительского элемента div с помощью Flexbox. Flexbox – отличный метод, поскольку он отзывчив и не требует расчета маржи, но нужно помнить о нескольких дополнительных шагах.

Чтобы центрировать div по горизонтали и вертикали с помощью Flexbox, вам необходимо установить высоту HTML, тела и родительского контейнера на 100%. Кроме того, вам необходимо определить родительский контейнер как гибкий контейнер. Вы можете сделать это, установив для свойства display значение «flex». Затем определите для свойства align-items и justify-content значение «center». Это укажет браузеру центрировать гибкий элемент (div внутри div) по вертикали и горизонтали.

Вы можете узнать больше о модуле макета Flexbox, прочитав Здесь различие между Flexbox, CSS Grid и Bootstrap. А пока давайте просто рассмотрим пример.

В приведенном ниже примере мы центрируем div с желтым цветом фона вместо границы и без текста внутри. Вместо этого он будет выглядеть как желтый квадрат.

Вот CSS:

Вот HTML:

Вот результат:

Определение и использование

Свойство устанавливает поля для элемента, и это сокращенное свойство для следующих свойств:

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

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

margin: 10px 5px 15px 20px;
- верхнее поле 10px
- правое поле 5px
- нижнее поле 15px
- левое поле 20px

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

margin: 10px 5px 15px;
- верхнее поле 10px
- правый и левый поля 5px
- нижнее поле 15px

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

margin: 10px 5px;
- верхнее и нижнее поля 10px
- правое и левое поля 5px

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

margin: 10px;

Примечание: Допускаются отрицательные значения.

Значение по умолчанию:
Унаследованный:	нет
Анимируемый:	да, смотреть индивидуальные свойства. Прочитать о animatable Попробовать
Версия:	CSS1
JavaScript синтаксис:	object.style.margin=»100px 50px» Попробовать

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

Значения margin

В качестве значений margin используются любые допустимые единицы длины, к примеру, пиксели, проценты, em, rem и др. В отличие от padding свойство margin может быть отрицательным (например: -10px), а также принимать значение auto. В остальном margin похоже на padding, у него также может быть от одного до четырёх значений.

Одно значение — определяет отступы для всех сторон блока.

Два значения — первое определяет отступы сверху и снизу для элемента, второе слева и справа для элемента.

Три значения — первое задаёт отступ сверху для элемента, второе одновременно слева и справа, а третье снизу.

Четыре значения — первое определяет отступ сверху, второе справа, третье снизу, четвёртое слева. Для запоминания последовательности можно представить часы — значения идут по часовой стрелке, начиная с 12 часов.

Значение auto

Свойство margin позволяет выравнивать элемент по центру горизонтали, если использовать значение auto и задать ширину элемента через width (пример 1).

Пример 2. Значение auto

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>margin</title>
<style>
.dialog {
width: 80%; /* Ширина блока */
background: #D4E3A5; /* Цвет фона */
border: 2px solid #7D9B3D; /* Параметры рамки */
padding: 1rem; /* Поля */
margin: auto; /* Выравниваем по центру */
}
</style>
</head>
<body>
<div class=»dialog»>
Полинезийцы называют Млечный путь Манго-Роа-И-Ата,
что в переводе с маори означает «Длинная акула на рассвете».
</div>
</body>
</html>

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

Рис. 3. Выравнивание блока по центру

Вместо margin: auto можно использовать комбинацию margin-left: auto и margin-right: auto.

Выравнивание блока по центру через значение auto работает только в сочетании с width.

Аналогично можно выровнять по центру горизонтали изображение, для этого даже не надо указывать ширину картинки, поскольку браузер получает её автоматически. Следует только превратить изображение в блочный элемент через свойство display, как показано в примере 3.

Пример 3. Значение auto

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>margin</title>
<style>
.center {
display: block; /* Блочный элемент */
margin: auto; /* Выравниваем по центру */
}
</style>
</head>
<body>
<img src=»image/html-128.png» alt=»HTML5″ class=»center»>
</body>
</html>

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

Рис. 4. Выравнивание картинки по центру

Проценты

В качестве значения margin можно использовать процентную запись, с которой связаны следующие особенности.

По горизонтали проценты считаются от ширины всего блока.
По вертикали проценты считаются от ширины всего блока.

Таким образом, margin в процентах берётся от ширины всего блока, даже для margin-top и margin-botom.

Отрицательный margin

margin может быть задан с отрицательным значением, тем самым элемент сдвигается в противоположном направлении. К примеру, margin-top:-10px поднимает блок вверх на 10 пикселей, а margin-left:-10px сдвигает блок влево.

В примере 4 показан сдвиг блока с классом stat вверх, если он располагается сразу после элемента <p>.

Пример 4. Использование отрицательного значения

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>margin</title>
<style>
p + .stat {
margin-top: -1rem; /* Поднимаем текст вверх */
}
.stat {
font-size: 3rem; /* Размер текста */
}
</style>
</head>
<body>
<p>Продано ёлок</p>
<p class=»stat»>64</p>
</body>
</html>

Результат данного примера показан на рис. 5. Без отрицательного margin строки располагаются далеко друг от друга.

Рис. 5. Поднимаем блок вверх через margin-top

Внутренние отступы (padding)

И так, начнем с внутренних отступов, их еще называют и поля. Как вы уже поняли из выше представленной структуры блочного блока, внутренние отступы задаются с помощью правил padding-top, padding-right, padding-bottom и padding-left. То или иное правило используется в зависимости, от какой стороны хотите задать отступ.

Для примера, зададим внутренний левый отступ, в размере 50px, для блока div, внутри которого есть некий контент.

Html код:

<div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

CSS код:

div{
    padding-left: 50px;
    width: 200px;
    border: 1px solid #000;
}

Смотрим на результат:

Внутренние отступы влияют на ширину и высоту блока в целом.

Общая ширина блока формируется за счет контента, за счет внутренних отступов и за счет ширины границы. Для того чтобы Вам наглядно это демонстрировать, откроем заново предыдущий пример в браузере ( я пользуюсь браузером mozilla firefox), нажимаем на правый клик мыши по блоку и выбираем пункт Inspect Element (Q). Если Вы пользуйтесь браузером Chrome то также нажмите на правый клик мыши по блоку и выберите последний пункт Inspect (Ctrl + shift + i).

Как видно из скриншота, ширина контента равна 200px, это та ширина, которую мы задали в стилях, через свойство width. Левый отступ равен 50px и толщина рамки вокруг блока равна одному пикселю.

Если посчитать то получается так:
200px (контент) + 50px(padding-left) + 1px(левая рамка) + 1px(правая рамка) = 252px (общая ширина блока)

Если уменьшим, увеличим или зададим и правый внутренний отступ, то общая ширина блока также измениться.

А вертикальные отступы действуют на высоту блока. Аналогично, как и ширина, высота считается почти по той же формуле: Высота контента + внутренние отступы (верхний и нижний) + толщина верхней и нижней рамки.

Overflow и относительное позиционирование элементов.

Этот баг проявляется в случае когда родительскому элементу установлено свойство overflow: auto , а дочерний позиционирован относительно него, то есть ему установлено свойство position: relative . При этом получается что дочерний элемент находится как бы поверх родительского. Давайте рассмотрим на примере:

Ожидаемый результат:

Результат в IE:

Исправляем.

Простейший способ решить проблему — установить родительскому элементу относительное позиционирование.

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 150px;
margin: 30px 0;
overflow: auto;
position: relative;

}

Центрирование абсолютно позиционированных элементов

Так как для абсолютно позиционированных элементов введено исключение, можно использовать значение auto , чтобы выровнять их по центру вертикально и горизонтально. Но сначала нужно выяснить, когда margin:auto будет работать именно так для отступа сверху CSS .

В другой спецификации W3C сказано:

Здесь довольно подробно описана ситуация, касающаяся значения auto для горизонтальных отступов. Чтобы эти отступы имели одинаковый размер, для left , width и right не должно задаваться значение auto ( их значение по умолчанию ). Чтобы отцентрировать элемент по горизонтали, нужно задать определенное значение для ширины абсолютно позиционируемого элемента, а left и right при этом должны иметь равные значения.

В спецификации также упоминается что-то подобное и для отступов сверху CSS div.

«Если для «top», «height» и «bottom» задано значение «auto» , установите для «top» позицию static…»

Следовательно, чтобы отцентрировать по вертикали абсолютно позиционируемый элемент top , height и bottom не должны иметь значение auto .

Теперь, объединив все это, мы получим следующее:

Use Cases For width: auto

Explaining the basics is not enough for us to grasp the concept, so I researched to highlight some practical use-cases for .

Different Width Between Mobile and Desktop

We have a group of buttons. On mobile, we want them to be next to each other (each button wrapper takes of its parent), while on desktop, each one should take the full width of their parent. How to do it?

I used flexbox to make the buttons appear next to each other.

And on desktop, I need each one to take the full width. In that case, you might be tempted to use , right? There is a better solution.

Since the is a block element, using makes it fill the available space of its parent nicely.