Bottom margin: как правильно задавать отступы внизу страницы

Bottom margin (нижний отступ) - это расстояние между нижней границей элемента и следующим элементом на странице. Он устанавливается с помощью свойства CSS margin-bottom.

Вот пример использования bottom margin:

HTML код:

Пример
Следующий блок

CSS код:

.box {
  margin-bottom: 20px;
}

Здесь мы установили bottom margin для элемента с классом "box" в 20px. Это означает, что после блока с классом "box" будет пространство в 20px, а затем начнется следующий элемент.

Если необходимо установить одинаковые отступы для всех сторон элемента (верхней, нижней, левой и правой), можно использовать сокращенную форму свойства margin:

.box {
  margin: 20px;
}

Этот код также установит отступы на всех сторонах блока в 20px.

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

.container {
    height: 500px;
    position: relative;
}
.box {
    position: absolute;
    bottom: 0;
    margin-bottom: auto;
}

В данном примере элемент с классом "box" должен быть прижат к нижней границе контейнера с классом "container". Для этого мы установили его положение как "absolute", а затем использовали свойство "bottom" и bottom margin, чтобы выровнять его по нижней границе родительского контейнера. При этом верхний отступ установлен как "auto", чтобы он рассчитывался автоматически.