Как в CSS игнорировать padding родителя?

Question

[FreeZa]

Всем добрейшего времени суток, я все задаюсь вопросом, как элементу задать игнорирование отступов родителя, и возможно ли такое вообще?

<div id="sidebar">

<h3>Заголовок</h3>
<ul id="menu">...</ul>

<div id="line"></div>

<h3>Заголовок</h3>
<ul id="menu">...</ul>

</div>

#sidebar{
width:300px;
padding:10px 20px;
border:1px #000 solid;
}

#line{
border-bottom:1px #000 solid;
width:300px;
}

Нужно сделать так чтобы разделитель (#line) не выступал в право из-за внутреннего отступа родителя

Думаю всем понятно что можно просто задать margin-left:-20px;

Собственно вопрос, можно ли как-то еще без маргина обойтись?

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

Answer 1

[linoleum]

Если вы ищете что-то вроде parents-padding: ignore; - то такого нет:)
Пожалуй, отрицательные марджины - если и не единственное решение, то уж точно самое простое.
Есть вариант не задавать padding родителю, а вместо этого задать margin потомкам где он нужен.

Answer 2

[Юрий Лобанов]

Вставьте написанную функцию на страницу и присваивайте класс padding-parent-ignore всем элементам, у которых хотите игнорировать паддинги родителей )
jsfiddle.net/iiil/2976n/2

Comments

[Юрий Лобанов]

Естественно, работает через margin, зато самому прописывать не надо, да и если css смените - переписывать отрицательные margin не надо.

[Николай Васильчук]

Ваша функция перезапишет собственный margin элемента.
Для вновь созданных элементов работать не будет.
Родителя вы выбрали в переменную, а $(this) нет.
Ну и, .css() поддерживает -=
В общем, есть над чем работать )

[Николай Васильчук]

Да, глобальные переменные еще.
Вот, обновил немного jsfiddle.net/2976n/3

[Юрий Лобанов]

@Anonym ну все Ваши замечания Вы уже сами исправили ) Я писал пример на скорую руку, да и не так уж хорошо знаю js и jq.
Полагаю, что проблему с новыми элементами можно решить, если вынести все в отдельную функцию и вызывать ее после создания элемента для этого элемента.
jsfiddle.net/iiil/2976n/5

Answer 3

[Андрей]

поддерживаю решение с position: absolute. видел в свое время подобное на css-tricks.com в исходниках и перестал бояться абсолютного позиционирования