Почему из-за position: absolute появляться пустая область?

Question

[JordanBelford]

Здравствуйте! Столкнулся с такой проблемой, ссылки задал свойство position: absolute, появилась внизу вне блока пустое пространство. Такая проблема именно с position: absolute. Кто знает в чем мб проблема?

<section class="test">
   <h2 class="test__title">lorem</h2>
   <h3 class="test__subtitle">lorem</h3>
   <a class="test__link" href="">Подробнее &rarr;</a>
</section>

.test{
  margin-top: 100px;
  position: relative;
  background-color: #1f1f1f;
}

.test__title {
  font-size: 90px;
  line-height: 1.15;
  max-width: 648px;
}

.test__subtitle {
  font-size: 12px;
  line-height: 51px;
}

.test__link {
  font-size: 36px;
  color: blue;
  line-height: 51px;
  text-decoration: none;
  position: absolute;
  right: 0;
  bottom: calc(50% - 25px);
}

Область выделенная красным появляется после применения свойства.

Answer 1

[Сергей delphinpro]

Absolute вырывает элемент из обычного потока. В потоке остаются h2 и h3. У последнего, вероятно присутствует нижний внешний отступ (margin-bottom). А дальше на сцену выходит эффект, называемый схлопывание марджинов

Answer 2

[aagzip]

Блок section.test становится меньше, вот и все.

Потому что у вас не задана явно высота блока section.test
По умолчанию высота блока равна высоте контента внутри него.

position: absolute;
right: 0;
bottom: calc(50% - 25px);

Вышеуказанными свойствами вы перемещаете блок в другое место и высота section.test уменьшается.

Comments

[JordanBelford]

aagzip, если я задам минимальную высоту это будет правильным решением?

[aagzip]

Да, вполне.

[Сергей delphinpro]

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

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

[Сергей delphinpro]

Продемонстрирую



Я задал минималку высоты для блока. Все хорошо, пока количество контента не меняется. Но если его стало больше (в красном блоке) – то мы опять наблюдаем пустоту после блока. Эта пустота – нижний отступ заголовка H3.

[aagzip]

Сергей delphinpro, вы бы свое решение предложили, в таком случае.

[Сергей delphinpro]

aagzip, Будьте внимательнее.
Во-первых, я дал ссылку в поисковик, где подробнейшим образом обсасывается проблема и методы ее решения.
Во-вторых, в своем примере я уже показал один из вариантов решения, только для верхнего отступа.

[Сергей delphinpro]

В конце концов, важнее понимать суть проблемы, и что к ней привело, чем просто получить код, её решающий.

[aagzip]

Сергей delphinpro, прошу прощения, не увидел.