Chcę, aby moja reguła pozioma ignorowała wypełnienie rodzica.
Oto prosty przykład tego, co mam:
#parent {
padding:10px;
width:100px;
}
hr {
width:100px;
}Przekonasz się, że pozioma linia rozciąga się poza rodzica o 10 pikseli. Próbuję zignorować wypełnienie, którego potrzebuje wszystko inne w nadrzędnym div.
Zdaję sobie sprawę, że mógłbym utworzyć osobny element div dla wszystkiego innego; to nie jest rozwiązanie, którego szukam.
Odpowiedzi:
Łatwa naprawa, po prostu zrób
margin:-10pxna godz.
Dla celów graficznych możesz zrobić coś takiego
img {
width: calc(100% + 20px); // twice the value of the parent's padding
margin-left: -10px; // -1 * parent's padding
}W zasadzie wszyscy odpowiedzieli na to pytanie, ale w małych częściach. Zajmowałem się tym zaledwie minutę temu.
Chciałem mieć tacę z przyciskami na dole panelu, gdzie panel ma 30 pikseli dookoła. Taca na guziki musiała być zlicowana z dnem i po bokach.
.panel
{
padding: 30px;
}
.panel > .actions
{
margin: -30px;
margin-top: 30px;
padding: 30px;
width: auto;
}Zrobiłem tutaj demo z większą ilością treści, aby poprowadzić ten pomysł. Jednak kluczowe elementy powyżej są przesunięte względem dopełnienia rodzica z dopasowanymi ujemnymi marginesami na potomku. Następnie najbardziej krytyczne, jeśli chcesz uruchomić dziecko o pełnej szerokości, a następnie ustaw szerokość na auto. (jak wspomniano w komentarzu powyżej Schlingela ).
Trochę późno, ale wymaga to trochę matematyki.
.content {
margin-top: 50px;
background: #777;
padding: 30px;
padding-bottom: 0;
font-size: 11px;
border: 1px dotted #222;
}
.bottom-content {
background: #999;
width: 100%; /* you need this for it to work */
margin-left: -30px; /* will touch very left side */
padding-right: 60px; /* will touch very right side */
}
<div class='content'>
<p>A paragraph</p>
<p>Another paragraph.</p>
<p>No more content</p>
<div class='bottom-content'>
I want this div to ignore padding.
</div>Nie mam Windowsa, więc nie testowałem tego w IE.
fiddle: fiddle przykład ..
margin: 0 -10px; jest lepszy niż
margin: -10px;Później zasysa zawartość pionowo do niej.
Twój rodzic ma 120 pikseli szerokości - czyli 100 szerokości + 20 wypełnień z każdej strony, więc musisz ustawić linię o szerokości 120 pikseli. Oto kod. Następnym razem zauważ, że dopełnienie sumuje się do szerokości elementu.
#parent
{
width: 100px;
padding: 10px;
background-color: Red;
}
hr
{
width: 120px;
margin:0 -10px;
position:relative;
}width: auto;w hr. jsfiddle.net/ToolmakerSteve/7p85dsrq/3 Niestety, to rozwiązanie nadal wymaga znajomości paddingustawionej przez rodzica.
Problem może sprowadzić się do tego, którego modelu pudełkowego używasz. Czy używasz IE?
Kiedy IE jest w trybie dziwactw, widthto zewnętrzna szerokość twojego pudełka, co oznacza, że wyściółka będzie wewnątrz. Zatem całkowity obszar pozostały wewnątrz pudełka ma 100px - 2 * 10px = 80pxszerokość 100 pikseli<hr> nie będzie wyglądał dobrze.
Jeśli jesteś w trybie standardowym, widthjest to wewnętrzna szerokość pudełka, a wyściółka jest dodawana na zewnątrz. Więc całkowita szerokość pudełka 100px + 2 * 10px = 120pxpozostawia dokładnie 100 pikseli wewnątrz pudełka dla twojego<hr> .
Aby go rozwiązać, dostosuj wartości CSS dla IE. (Sprawdź w Firefoksie, aby zobaczyć, czy tam wygląda dobrze). Lub jeszcze lepiej, ustaw typ dokumentu, aby przełączyć przeglądarkę w tryb ścisły - w którym również IE jest zgodna ze standardowym modelem pudełkowym.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
...Jeśli masz kontener nadrzędny z pionowym dopełnieniem i chcesz, aby coś (np. Obraz) wewnątrz tego kontenera ignorowało jego pionowe dopełnienie, możesz ustawić ujemny, ale równy margines zarówno dla „góry”, jak i „dołu”:
margin-top: -100px;
margin-bottom: -100px;Rzeczywista wartość nie wydaje się mieć większego znaczenia. Nie próbowałem tego w przypadku wyściółek poziomych.
Oto inny sposób, aby to zrobić.
<style>
.padded-element{margin: 0px; padding: 10px;}
.padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
<img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>Oto kilka przykładów na repl.it: https://repl.it/@bryku/LightgrayBleakIntercept
<hr>element div będzie oddalony o 20 pikseli od końca. Zobacz to jsFiddle, aby zobaczyć, co mam na myśli: jsfiddle.net/YVrWy/1