CSS - абсолютное позиционирование и padding

Reading time ~1 minute

При верстке одного макета столкнулся с таким вопросом. Имеется блок-баннер, у которого заданы границы border и padding. Внутри этого блока располагается блок с текстом. Этот блок позиционируется абсолютно относительно своего блока-родителя.

При задании CSS-параметров абсолютного позиционирования у меня возник вопрос - отчего же отсчитывается позиционирование для внутреннего блока? От границы border или padding внешнего блока?

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

Абсолютное позиционирование

Ниже все же в двух словах опишу картинку.

Итак:

  • внешний блок div имеет границу border шириной 10px, padding размером 20px и относительное позиционирование;
  • внутренний блок div имеет абсолютное позиционирование - top: 40px и left: 40px.

Так вот, внутренний блок позиционируется абсолютно внутри внешнего блока-родителя по его границе. При этом отступ padding роли не играет, он не учитывается совсем. Вот и выяснил для себя этот вопрос.

На этом все.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке