Как сделать отступ от верха в css
Перейти к содержимому

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

  • автор:

margin-top

CSS свойство margin-top устанавливает внешний отступ сверху элемента. Отступом является расстояние от внешнего края верхней границы текущего элемента до внутренней границы его родительского элемента либо до границы элемента, расположенного над ним. Обратите внимание, для строчных элементов (display : inline; ) могут быть установлены только внешние отступы с левой и с правой стороны.

margin top css

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

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

Объединение полей

  1. Поля сестринских элементов, расположенных один под другим и находящихся в потоке документа, объединяются в одно общее. Высота полученного поля равняется высоте большего из двух полей, например: поле верхнего элемента (margin-bottom) составляет 10px , а нижнего элемента ( margin-top ) — 20px , единое поле в этом случае будет высотой 20px .
  2. Объединение полей родительского и дочернего элемента, находящихся в потоке документа, происходит, если родительский элемент не имеет ничего из того, что могло бы отделять его внешний отступ от внешнего отступа дочернего элемента (рамки, внутреннего отступа или строчного содержимого). Также объединение полей не будет происходить, если родительскому элементу установить свойство overflow со значением hidden или auto . Плюс от этого способа заключается в том, что размер родительского элемента не увеличивается.
Значение по умолчанию: 0
Применяется: ко всем элементам, за исключением элементов, которые относятся к типу display: table-*, кроме table-caption, table и inline-table.
Анимируется: да
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.marginTop=»10px»

Синтаксис

margin-top: величина|auto|inherit;

Значения свойства

Значение Описание
auto Автоматически вычисляется браузером как ноль.
величина Указывает размер поля в единицах измерения, используемых в CSS.
% Величина, указанная в процентах, вычисляется в зависимости от ширины области содержимого родительского элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Использование отступов для оформления текста

Чтобы текст был более читаемым, необходимо наличие свободного пространства в блоке для этого текста. Вокруг текста должно быть достаточно «воздуха», он не должен «прилипать» к краям, ему не должно быть «тесно».

За отступы в CSS отвечают два свойства: padding задаёт внутренние отступы в блоке, а margin задаёт внешние отступы. Пример, как можно их использовать:

В примере выше задан внутренний отступ со всех сторон 10px , а также внешний отступ сверху и снизу 20px и 0px слева и справа. Это составные свойства. Подробно padding и margin разбираются в части «Блочная модель документа».

Посмотрите на блок aside на нашем сайте. Блоку явно не хватает отступов, давайте добавим их!

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим

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

В CSS отступ сверху можно сделать с помощью следующих свойств:

  • padding-top — установка внутреннего отступа
  • margin-top — установка внешнего отступа

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

.content  margin-top: 20px; > 

Чтобы сбросить отступ, необходимо указать значение 0 нужному типу отступа:

.content  padding-top: 0; > 

CSS: Внешние отступы

Внутренние отступы позволяли добавить «воздуха» в блок и дать пространство между границей блока и его контентом. А как не дать двум соседним блокам прижиматься друг к другу?

Карточка с белым текстом на фиолетовом фоне
Карточка с белым текстом на фиолетовом фоне

Чтобы отделить две карточки из примера выше используются внешние отступы. Их принцип работы схож с внутренними отступами, а меняется только направление. В плане свойств и их значений всё то же самое. Существует 4 правила и одно общее:

  • margin-top — внешний отступ сверху
  • margin-right — внешний отступ справа
  • margin-bottom — внешний отступ снизу
  • margin-left — внешний отступ слева

Для объединения значений используют свойство margin , в котором сохраняется порядок указания:

  • отступ сверху
  • отступ справа
  • отступ снизу
  • отступ слева

Также, как у внутренних отступов, для удобства существуют сокращённые записи этих правил:

  • Если указать только одно значение, то оно будет использовано одновременно для всех сторон
  • Если указать два значения, то первое будет использоваться для отступов по вертикали (сверху и снизу), а второе по горизонтали (справа и слева)
  • Если указать три значения, то они будут использоваться для отступа сверху, по горизонтали и снизу
.card

Карточка с белым текстом на фиолетовом фоне
Карточка с белым текстом на фиолетовом фоне

Задание

Добавьте в редактор с классом margin и установите внешние отступы в 20 пикселей со всех сторон. Стили запишите в теге . Используйте сокращённую запись

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

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

Мой код отличается от решения учителя ��

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

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

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

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