Отступ html снизу: отступы | htmlbook.ru

margin-bottom — внешний отступ снизу

Поддержка браузерами

12.0+	6.0+	1.0+	1.0+	3.5+	1.0+

Описание

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

Размер внешнего нижнего отступа можно указывать в пикселях (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.marginBottom=»10px»

Синтаксис

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

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

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

Пример

margin-bottom:

auto

10px

25px

50px

100px

10%

20%

Элемент, у которого будет изменятся ширина нижнего поля.

Другой элемент.

div#myBox {
background-color: red;
margin-bottom: auto;
}

html — Лишний отступ внизу блока, содержащего img

Вопрос задан 6 лет 8 месяцев назад

Изменён 6 лет 8 месяцев назад

Просмотрен 4k раза

CSS

main div. image {
    display: block;
    width: 100%;
}
main div.image img {
    width: 100%;
    height: auto;
}

HTML

<div>
  <img src="/images/nature-1.jpg" alt="">
</div>

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

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

• html
• css

2

main div.image img {
    width: 100%;
    height: auto;
}

Можно добавить

vertical-align: top;

либо использовать

display: block;

1

Картинка, по умолчанию, отображается как строковый элемент, на который влияет высота строки.

Именно высота строки ответственна за расстояние между div и img.

Решения два:

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

.holder {
  border: 1px solid lime;
  outline: 1px solid #000;
  width: 100px;
}
.fix-1 {
  line-height: 0;
}
.fix-2 img {
  display: block;
}

<div>
  <div>
    <img src="http://satyr.io/100x100/1" alt="">
  </div>
  <div>
    <img src="http://satyr.io/100x100/2" alt="">
  </div>
</div>

2

добавте в стили к картинке display: block; — такое поведение изначально изза того что картинка по умолчанию инлаин

main div.image img {
   display: block;
   width: 100%;
   height: auto;
}

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

HTML-отступ · Темы веб-разработчиков · Изучение Интернета

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

---

Зачем делать отступы в HTML

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

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

Отступ чрезвычайно полезен по нескольким причинам:

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

---

Отступ дочерних элементов

Всякий раз, когда элемент уникален и находится внутри другого элемента, он должен иметь отступ:

 
  <заголовок>
     
Все об апатозавре
 
  

 

• Потому что
  находится внутри
  с отступом.
• Поскольку
  находится внутри , он получает отступ, как и все элементы внутри него.

Не все дочерние элементы должны иметь отступ

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

 <навигация>
  <ул>
    
    
Травоядные динозавры
    
Всеядные динозавры
    
Плотоядные динозавры
  

 

Но вы могли бы написать это и по-другому, если это имеет для вас смысл:

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

 
Игуанодон — большой двуногий динозавр.
 

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

Не превышайте отступ

Будьте осторожны с отступом, делайте отступ только тогда, когда элемент находится внутри другого элемента.

Пример ниже неверен:

 <артикул>
   
Стегозавр
 
    
      
У стегозавра огромные пластины и остроконечный хвост.

 

Теги и

не должны иметь отступ, поскольку они не находятся внутри других элементов.

Приведенный выше пример должен быть написан следующим образом:

 <статья>
   
Стегозавр
 
  
  
У стегозавра огромные пластины и остроконечный хвост.

 

, и

выровнены, потому что все они находятся непосредственно внутри

.

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

---

Дальнейшая организация

Есть несколько других способов повысить удобство сопровождения и ясность нашего HTML.

Расстояние по вертикали

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

 <артикул>
   
Птеранодон
 
  <ул>
    
Мухи
    
Имеет длинный клюв
  

 

Обратите внимание на пустые строки после

и до и после

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

Комментирование разделов HTML также очень полезно для просмотра групп.

 <дел>
  <дел>…
  <дел>
    
Введение
    <дел>
      Введение