Ignoruj dopełnienie rodzica

127

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.

html css Sam
źródło

160

Łatwa naprawa, po prostu zrób

margin:-10px

na godz.

Sam
źródło

9

To działa, ale problem polega na tym, że nie przedłuży pełnej długości nadrzędnego elementu div. Dzieje się tak, ponieważ wypełnienie NIE jest uwzględnione w szerokości 100 pikseli, co oznacza, że w rzeczywistości ma szerokość 120 pikseli, a Twój <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

Alastair Pitts

Tak, wypracowałem to, kiedy to dodałem; szerokość nie ma znaczenia.

Sam

22

jeśli potrzebujesz 100% szerokości, użyj auto jako atrybutu szerokości. Szerokość zostanie obliczona z uwzględnieniem podanych marginesów.

schlingel

4

Powinieneś zrobić coś takiego jak ... margin: 0 -15px; ..... w przeciwnym razie hr będzie zasysać w pionie sąsiednią zawartość.

honkskillet

trochę hackish. Szkoda, że nie ma lepszego sposobu

oldboy

29

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
}

adriancho5692
źródło

8

Ale co, jeśli niekoniecznie znasz wyściółkę rodzica?

1

To zadziałało, gdy używam min-width, zamiast tylko width.

Pedro Nadolny

@ user5707327 zawsze możesz łączyć style z javascriptem, aby uzyskać dopełnienie rodzica

adriancho5692

wow, genialne użycie ujemnych szerokości!

Mr PizzaGuy

9

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 ).

Mitchell Geere
źródło

7

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 ..

sqram
źródło

1

Powinieneś podzielić padding-right: 60px na padding-left: 30px; padding-right: 30px, aby zawartość nie była przesunięta, gdy używasz text-align: center;

Łukasz

3

margin: 0 -10px;

jest lepszy niż

margin: -10px;

Później zasysa zawartość pionowo do niej.

honkskillet
źródło

2

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;
}

łatwe
źródło

1

Z określoną szerokością jest to łatwe. Problem jest wtedy, gdy nie znasz szerokości

Guilherme Ferreira

@GuilhermeFerreira Użyj width: auto;w hr. jsfiddle.net/ToolmakerSteve/7p85dsrq/3 Niestety, to rozwiązanie nadal wymaga znajomości paddingustawionej przez rodzica.

ToolmakerSteve

1

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>
 ...

http://www.quirksmode.org/css/quirksmode.html

Martin Algesten
źródło

1

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.

Marnix.hoh
źródło

0

łatwa naprawa .. dodaj do nadrzędnego div:

box-size: border-box;

Jaclyn U
źródło

0

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

Dillon Burnett
źródło

Ignoruj ​​dopełnienie rodzica

Odpowiedzi:

Ignoruj dopełnienie rodzica