Почему дочерний элемент не реагирует на родительский padding?

Question

[whitepro213]

Буду так же рад советам по поводу верстки (ибо начинающий) )
https://codepen.io/KillAgil/pen/jYBxoJ

Comments

[Антон Спирин]

Совет #1: скидывайте сложные примеры в JSFiddle или CodePen. Так помочь вам будет гораздо проще и быстрей.

[Ankhena]

1. Пример в песочницу. вместе со скриптом слайдера.
2. Вероятнее всего, скрипт добавляет position absolute со всеми вытекающими последствиями.

[whitepro213]

Ankhena, скрипта еще не написал.

[whitepro213]

Антон Спирин, большое спасибо )

[Ankhena]

whitepro213, я не вижу, чтобы он не реагировал. Если речь про .slider и slider__line

Специально задала родителю outline

[whitepro213]

Ankhena, , а как же это? Как я понимаю, line вообще не должен находиться под паддингом, объясните пожалуйста.

[Антон Спирин]

whitepro213, у вас все реагирует. Если вы по поводу торчащих элементов в зоне отступа, то тут надо
переделать структуру так, чтобы overflow: hidden был у дочернего контейнера, а не у самого slider на котором padding.
Посмотрите как сделано у меня тут https://jsfiddle.net/rockon404/wgry1rv1/
Там текст в элементе с overflow: hidden, а у внешнего контейнера задан padding. Поэтому текст частично скрыт и есть отступ.

[Ankhena]

whitepro213, лучше вы сначала объясните или нарисуйте как по-вашему оно должно выглядеть, а то я не могу понять в чем проблема :(

[Антон Спирин]

whitepro213, вру у меня там margin, но это роли не играет.

[whitepro213]

Ankhena, по сути закрашенная область не должна быть видна, ибо её закрывает паддинг. Извините за то, что я такой проблемный :
)

[Ankhena]

whitepro213, тык overflow у вас стоит

[Антон Спирин]

whitepro213, я вам уже писал выше. Паддинг не может ничего скрывать. Overflow: hidden; лишь запрещает отрисовку за пределами элемента, но не на внутреннем отступе. Вам надо либо убирать padding, либо переносить overflow: hidden; на дочерний элемент.

[whitepro213]

Антон Спирин, большое спасибо. Изначально думал, что паддинг - это железная стена через, которую нельзя пройти ни при каких усилиях.

Answer 1

[daytona1]

Потому что padding это наружный отступ.

Comments

[Антон Спирин]

А вот и нет. htmlbook.ru/css/padding

[Ankhena]

padding - внутренний отступ
margin - наружный

[Сергей Свиридонов]

Это ТРэШ!

Answer 2

[Сергей Свиридонов]

А где должно реагировать? Уточните.

Answer 3

[Alisa1]

Попробуй конкретно написать padding-top или padding-bottom.