Как сделать отступ сверху в css

Как сделать отступ сверху в html

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

Свойство margin определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: margin-top, margin-right, margin-bottom и margin-left.

Таким образом чтобы добавить отступ каждому элементами сверху правильно использовать margin-top. Рассмотрим пример.

 class="box">Блок №1  class="box">Блок №2  class="box">Блок №3 

Применив стили ниже, блоки образуют одну колонку без отступов.

.red  background-color: red; > .blue  background-color: blue; > .green  background-color: green; > .box  height: 100px; width: 125px; margin-top: 20px; > 

Схлопывающиеся margin

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

Для margin слева и справа схлопывание никогда не применяется.

Схлопывание margin у соседних элементов

Схлопывание задумывалось в первую очередь для корректного отображения текста в абзацах. Расстояние между абзацами

без схлопывания увеличится в два раза, тогда как верхний margin у первого абзаца и нижний margin у последнего абзаца останутся неизменными. Схлопывание гарантирует, что расстояние в абзацах везде будет одинаковым.

В примере 1 два блока располагаются один под другим, при этом у первого блока отступ снизу равен 20px, а у второго блока отступ сверху равен 10px.

Пример 1. Схлопывание margin

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

Рис. 1. Вертикальное расстояние между блоков

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

На рис. 2 приведено схематическое изображение результата схлопывания margin .

Рис. 2. Схлопывание margin

Если один из margin отрицательный, то в этом случае происходит их складывание по правилам математики:

x + (-y) = x – y

Если один из margin отрицательный, тогда margin вычитаются.

На рис. 3 схематично приведено поведение блоков, когда верхний margin у нижнего блока отрицательный.

Рис. 3. Один margin отрицательный

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

Пример 2. Отрицательный margin

Результат данного примера показан на рис. 4. Расстояние между двумя блоками считается как отступ снизу у верхнего блока минус отступ сверху у нижнего блока (20px-10px). В итоге расстояние будет равно 10 пикселей.

Рис. 4. Вертикальное расстояние между блоков

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

Так, если отступы равны -10px и -20px, то итоговое значение будет -20px. При этом элементы будут частично перекрываться (рис. 5).

Рис. 5. Отрицательные margin

Пустые элементы

Для пустых элементов, внутри которых нет никакого содержимого, margin-top и margin-bottom также комбинируются в один по тем же правилам, что и для соседних блоков. При этом должен ещё соблюдаться ряд условий:

• для элемента не должен быть задан padding сверху или снизу;
• для элемента не должен быть задан border сверху или снизу;
• высота элемента не должна быть указана через свойство height или min-height.

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

Пример 3. Пустой блок

Результат данного примера показан на рис. 6. Расстояние между двумя цветными блоками определяется пустым блоком с классом hollow . У этого блока верхний и нижний margin объединяются в один, общая высота которого будет 20 пикселей.

Рис. 6. Схлопывание margin у пустого блока

Вложенные элементы

Также схлопываются margin самого блока с margin у его первого и последнего дочерними элементами. Более точно комбинируется так:

• margin-top родителя с margin-top его первого дочернего элемента;
• margin-bottom родителя с margin-bottom его последнего дочернего элемента.

На рис. 7 схематично показано что margin у дочернего элемента располагается не внутри родителя, а выходит за его пределы.

Рис. 7. margin у дочернего элемента

Такое поведение часто можно встретить у заголовков, вроде или , которые идут первыми в блоке. У этих заголовков уже содержится margin-top и margin-bottom по умолчанию и он, объединяясь с родительским margin , влияет на отступы всего блока (пример 4).

Пример 4. margin у заголовка

Текст снизу

Результат данного примера показан на рис. 8. margin у выходит за пределы блока и задаёт внешние отступы до и после блока.

Рис. 8. margin у дочернего элемента

Отмена схлопывания margin

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

Схлопывание margin не срабатывает:

• для элементов с абсолютным позиционированием, т. е. таких, у которых position установлено как absolute или fixed ;
• для обтекаемых элементов (для них свойство float задано как left или right );
• для строчных или строчно-блочных элементов (для них свойство display задано как inline или inline-block );
• для флекс-элементов (у родителя которых свойство display задано как flex или inline-flex );
• для элемента .

Схлопывание не действует на дочерние элементы:

• если у родителя значение overflow задано как auto , hidden или scroll ;
• если у родителя на стороне схлопывания задано свойство padding;
• если у родителя на стороне схлопывания задано свойство border.

Учтите, что свойства padding и border должны иметь размер больше нуля, к примеру, 1px.

Возьмём пример 4 и доработаем его, чтобы margin у заголовка работал внутри блока. Для этого к родительскому блоку добавляем свойство padding со значением 0.1px. На экране такая величина будет незаметна, но браузеры её понимают и схлопывание margin отменяют (пример 5).

Пример 5. Отмена схлопывания margin

Текст снизу

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

Рис. 9. margin у дочернего элемента

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

.block < /* 1. Ненулевой padding сверху и снизу */ padding: 0.1px 0; /* 2. Скрываем всё за пределами блока */ overflow: hidden; /* 3. Прозрачная линия сверху и снизу */ border-top: 1px solid transparent; border-bottom: 1px solid transparent; >

Для соседних элементов схлопывание margin отменять, как правило, нет необходимости, поскольку результат достаточно предсказуем — надо только помнить о поведении margin или включать margin-top или margin-bottom лишь для одного элемента. В примере 6 расстояние между блоков регулируется значением margin-bottom у block1 . Здесь этот margin единственный, поэтому никакого объединения не происходит и вертикальный промежуток между блоков равен значению margin-bottom .

Пример 6. Расстояние между блоков

Для полноты картины приведём несколько вариантов, когда схлопывание margin у соседних блоков не работает. Данный стиль можно добавить к каждому блоку или только к одному. Ширина элемента с float определяется содержимым элемента, поэтому надо явно задать ширину блока, равную 100%. За счёт этого не ломается вёрстка, потому что нет места для обтекания элемента.

/* 1. Использование float */ .block < float: left; /* Обтекаемый элемент */ width: 100%; /* Занимает всю доступную ширину */ box-sizing: border-box; /* Ширина не учитывает padding и border */ >

Ширина строчно-блочных элементов также определяется их содержимым, поэтому данный вариант похож на предыдущий.

/* 2. Использование строчно-блочных элементов */ .block < display: inline-block; /* Строчно-блочный элемент */ width: 100%; /* Занимает всю доступную ширину */ box-sizing: border-box; /* Ширина не учитывает padding и border */ >

Класс parent надо добавить к родителю наших блоков.

/* 3. Использование флексбоксов */ .parent < display: flex; /* Работаем с флексами */ flex-direction: column; /* Элементы выводятся друг под другом */ >

Свойство margin

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

Объединение отступов

Вертикальные отступы поглощают друг друга, горизонтальные – нет.

Например, вот документ с вертикальными и горизонтальными отступами:

  
Горизонтальный 20px ← 40px → 20px Отступ 
 
Вертикальный 20px
 

Расстояние по горизонтали между элементами SPAN равно 40px , так как горизонтальные отступы по 20px сложились.

А вот по вертикали расстояние от SPAN до P равно 20px : из двух вертикальных отступов выбирается больший max(20px, 15px) = 20px и применяется.

Отрицательные margin-top/left

Отрицательные значения margin-top/margin-left смещают элемент со своего обычного места.

В CSS есть другой способ добиться похожего эффекта – а именно, position:relative . Но между ними есть одно принципиальное различие.

При сдвиге через margin соседние элементы занимают освободившееся пространство, в отличие от position: relative , при котором элемент визуально сдвигается, но место, где он был, остаётся «занятым».

То есть, элемент продолжает полноценно участвовать в потоке.

Пример: вынос заголовка

Например, есть документ с информационными блоками:

• водительское удостоверение на право управления транспортным средством соответствующей категории;
• . и так далее.

Использование отрицательного margin-top позволяет вынести заголовки над блоком.

/* вверх чуть больше, чем на высоту строки (1.25em) */ h2

А вот, что бы было при использовании position :

При использовании position , в отличие от margin , на месте заголовков, внутри блоков, осталось пустое пространство.

Пример: вынос разрыва

Организуем информацию чуть по-другому. Пусть после каждого заголовка будет разрыв:

 
Заголовок
 
Текст Текст Текст.
 

Пример документа с такими разрывами:

Для красоты мы хотим, чтобы разрыв HR начинался левее, чем основной текст. Отрицательный margin-left нам поможет:

/*+ no-beautify */ hr.margin < margin-left: -2em; >/* для сравнения */ hr.position

Обратите внимание на разницу между методами сдвига!

• hr.margin сначала сдвинулся, а потом нарисовался до конца блока.
• hr.position сначала нарисовался, а потом сдвинулся – в результате справа осталось пустое пространство.

Уже отсюда видно, что отрицательные margin – исключительно полезное средство позиционирования!

Отрицательные margin-right/bottom

Отрицательные margin-right/bottom ведут себя по-другому, чем margin-left/top . Они не сдвигают элемент, а «укорачивают» его.

То есть, хотя сам размер блока не уменьшается, но следующий элемент будет думать, что он меньше на указанное в margin-right/bottom значение.

Например, в примере ниже вторая строка налезает на первую:

 
Первый
 
Второй div думает, что высота первого на 0.5em меньше
 

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

Итого

• Отрицательные margin-left/top сдвигают элемент влево-вверх. Остальные элементы это учитывают, в отличие от сдвига через position .
• Отрицательные margin-right/bottom заставляют другие элементы думать, что блок меньше по размеру справа-внизу, чем он на самом деле.

Отличная статья на тему отрицательных margin : The Definitive Guide to Using Negative Margins

Задачи

Нерабочие margin?

важность: 3

В примере ниже находится блок .block фиксированной высоты, а в нём – прямоугольник .spacer .

При помощи margin-left: 20% и margin-right: 20% , прямоугольник центрирован в родителе по горизонтали. Это работает.

Далее делается попытка при помощи свойств height: 80% , margin-top: 10% и margin-bottom: 10% расположить прямоугольник в центре по вертикали, чтобы сам элемент занимал 80% высоты родителя, а сверху и снизу был одинаковый отступ.

Однако, как видите, это не получается. Почему? Как поправить?

 .block < height: 150px; border: 1px solid #CCC; background: #eee; >.spacer 
Ошибка заключается в том, что margin при задании в процентах высчитывается относительно ширины. Так написано в стандарте.
При этом не важно, какой отступ: левый, правый. верхний или нижний. Все они в процентах отсчитываются от ширины. Из-за этого и ошибка.
Ситуацию можно исправить, например, заданием margin-top/margin-bottom в пикселях, если это возможно или, в качестве альтернативы, использовать другие средства, в частности, position или padding-top/padding-bottom на родителе.
Расположить текст внутри INPUT
важность: 5
Создайте с цветной подсказкой внутри (должен правильно выглядеть, не обязан работать):
В дальнейшем мы сможем при помощи JavaScript сделать, чтобы текст при клике пропадал. Получится красивая подсказка.
P.S. Обратите внимание: type="password" ! То есть, просто value использовать нельзя, будут звёздочки. Кроме того, подсказка, которую вы реализуете, может быть как угодно стилизована.
P.P.S. Вокруг INPUT с подсказкой не должно быть лишних отступов, блоки до и после продолжают идти в обычном потоке.
Подсказка
Надвиньте элемент с текстом на INPUT при помощи отрицательного margin .
Решение
Надвинем текст на INPUT при помощи отрицательного margin-top . Поднять следует на одну строку, т.е. на 1.25em , можно для красоты чуть больше – 1.3em :
Также нам понадобится обнулить «родной» margin у INPUT , чтобы не сбивал вычисления.
 input < margin: 0; width: 12em; >#placeholder 
Свойство padding
Сокращенная запись для определения внутреннего отступа у элемента. Включает в себя свойства padding-top, padding-right, padding-bottom, padding-left.
padding: 15px 20px 15px 20px;
Пошаговый план! Как быстро научиться создавать сайты!

iOS Safari
Значения
Убирает все внутренние отступы у элемента
padding: 10px;
Используя один параметр. Задает внутренний отступ со всех сторон
 .example-1 

Содержимое блока

padding: 10px 20px;
Используя два параметра. Первый - внутренний отступ сверху и снизу, второй - внутренний отступ слева и справа
 .example-2 

Содержимое блока

padding: 15px 25px 25px;
Используя три параметра. Первый - внутренний отступ сверху, второй - внутренний отступ справа и слева, третий - внутренний отступ снизу
 .example-3 

Содержимое блока

padding: 10px 15px 10px 25px;
Используя четыре параметра. Первый - внутренний отступ сверху, второй - внутренний справа, третий - внутренний отступ снизу, четвертый - внутренний отступ слева
 .example-4 

Читать:
Как скачать шаблон сайта с wix