Как сделать отступы блоков в html
Перейти к содержимому

Как сделать отступы блоков в html

  • автор:

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

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

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

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

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

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

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

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

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

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

Задание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

box-model

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

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

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

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

Как сделать отступы между блоками div, чтобы они не были впритык?

Всем привет. Только начал изучать bootstrap (3 версия), поэтому есть трудности (даже в терминологии). Возник такой вопрос: как отделить блоки div друг от друга? Имею в виду, чтобы на сайте содержимое этих блоков не было впритык. Вот например у меня есть 2 div-а, как написать, чтобы на сайте выглядело раздельно?

  
ALL

Также вопрос по коду (он не мой). Что значит col-sm-15 и col-sm-16? Это же вроде сетка, в которой максимум 12 столбцов возможно.

Отслеживать
задан 9 июл 2020 в 19:14
43 1 1 золотой знак 1 1 серебряный знак 8 8 бронзовых знаков

в 4.5 версии есть уже встроенные классы для организации отступов getbootstrap.com/docs/4.5/utilities/spacing

Внешние и внутренние отступы

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

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

А когда внутри одного элемента нужно отодвинуть его содержимое, то — padding .

Существует несколько способов задать значения. Например, если требуется отступ со всех сторон, то нужно использовать следующую схему:

.parent< padding: Ов Оп Он Ол; > .child< margin: Ов Оп Он Ол; > 

где: Ов – значение отступа сверху, Оп – значение отступа справа, Он – значение отступа снизу, Ол – значение отступа слева.

Для практики зададим внешний отступ для дочернего блока, и внутренний для родительского. Значение будут следующие: сверху — 10px, справа – 15px, снизу – 20px, слева – 25px.

.parent< padding: 10px 15px 20px 25px; > .child< margin: 10px 15px 20px 25px; > 

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

.parent< padding: 10px 15px 20px; > .child< margin: 10px 15px 20px; > 

В результате получим отступ слева и справа по 15px. Но что делать если значение сверху и снизу, а также справа и слева одинаковые? Для такого случая существует следующая форма записи:

.parent< padding: 10px 15px; > .child< margin: 10px 15px; > 

В итоге у блоков будет отступы сверху и снизу в 10px, а справа и слева по 15px. А что если со всех сторон одинаковый отступ? И на этот случай есть следующее решение:

.parent< padding: 10px; > .child< margin: 10px; > 

Таким способом браузер добавит элементам отступ в 10px со всех сторон.

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

.parent< padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; > .child< margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; > 

где: margin-top / padding-top – это отступ сверху, margin-right / padding-right – это отступ справа, margin-bottom / padding-bottom – это отступ снизу, margin-left / padding-left – это отступ слева.

И здесь можно задуматься над тем, что не понятно в каких ситуациях использовать краткий синтаксис, а в каких — полный. Я рекомендую тебе поступать так. Если тебе нужно указать 1 или 2 отступа, то использую полный синтаксис, если же 3 или 4, то краткий.

Схлопывание внешние отступов (Margin Collapsing)

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

div class="parent"> div class="block block1">Первый блок div> div class="block block2">Второй блок div> div> 
.block< background-color: tomato; > .block1< margin-bottom: 10px; > .block2< margin-top: 15px; > 

Когда я начинал изучать верстку, то думал, что расстояние между блоками суммируется, и соответственно в примере отступ будет равен 25px. Но а теперь посмотри на следующее изображение:

15px! Дело в том, что браузер не суммирует значения, а выбирает наибольшее из них. Эта особенность реализации отступов поломала не мало умов начинающих верстальщиков. Она даже имеет свое отдельное название «Margin Collapsing» или по-русски «Схлопывание внешних отступов».

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

Вертикальный margin для строчного элемента

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

div class="parent"> span class="block block1">Первый блок span> div class="block block2">Второй блок div> div> 
.parent< margin: 20px; border: 1px solid #000; > .block< background-color: tomato; > .block1< margin: 100px; > 

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

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

Выпадающий margin

Часто начинающие верстальщики из-за отсутствия опыта совершают одну ошибку. Они задают вертикальный margin дочерним элементам. Теперь посмотрим к чему это приводит.

div class="parent"> div class="block ">Первый блок div> div> 
.block< background-color: tomato; margin: 100px; > 

Как видно по изображениям margin, который мы задали для дочернего элемента выходит за пределы родительского блока. Именно такое поведение чаще всего является неожиданным.

Но это еще пол-беды. Давай попробуем по очереди задать padding и border для родительского блока.

.parent< padding: 10px; > 

.parent< border: 5px solid #000; > 

Как видишь теперь margin не выходит за пределы родителя. Но такое поведение может очень легко сломать верстку. Поэтому не надо использовать внешние отступы для того, чтобы отодвинуть содержимое блока от его границ. Для этого есть padding!

results matching » «

No results matching » «

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

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