Jak sprawić, aby dziecko w większym stopniu przekraczało szerokość rodzicielską?

Question

Mam rodzica (kontener) i dziecko (nagłówek/blok h1).

.container { 
    width: 1024px; 
} 
#h1 { 
    width: 1024px; 
    padding: 0 30px 0 30px; 
    background-color: something; 
} 

Problem jest z jakiegoś powodu, zamiast wyciągając rodzica 30 pikseli w lewo i 30 pikseli w prawo, to rozciąga się 60 pikseli w prawo. Właśnie ustawiłem ujemny lewy margines o wartości -30px, aby go cofnąć i uczynić go równym, ale zastanawiałem się, czy istnieje lepszy/właściwy sposób na zrobienie tego?

Jest to obraz tego, co się dzieje:

Jest to obraz tego, co chcę, żeby wyglądać (i dostałem to wyglądać z marży ujemnej):

Answer 1

Negatywny margines jest całkowicie w porządku. Lub możesz pozycjonować bardziej programowo z pozycją absolutną i względną.

CSS

.container { 
    background: crimson; 
    height: 600px; 
    margin: 0 auto; 
    width: 300px; 
} 

.header { 
    background: purple; 
    height: 100px; 
    left: 0; 
    margin: 60px auto; 
    padding: 0 30px; 
    position: absolute; 
    right: 0; 
    width: 360px; 
} 

HTML

<div class='container'> 
    <div class='header'></div> 
</div> 

Codepen example.

Answer 2

marża ujemna jest jedynym sposobem, aby przejść w tym przypadku naprawdę (i jest jednym z niewielu przypadków gdzie uznałbym to za dopuszczalne użycie).

Istnieją inne rozwiązania można badać (np się czerwona bg ustawiony centralnie wyrównany bg obrazu, wtedy div „sz dopełnienie treści poza h1), ale naprawdę nie ma bonus do robi to nad użyciem negatywna margines, w rzeczywistości długoterminowy jest mniej konserwowalny.

Jak już zasugerowano, można również użyć pozycjonowania, aby rozwiązać ten problem (patrz przykład poniżej).

HTML:

<div class="container"> 
    <p>Lorem ipsum dolor sit amet</p> 
    <p>Lorem ipsum dolor sit amet</p> 
    <h1>testing, testing, 1 2 3</h1> 
</div> 

CSS:

.container { 
    background: #f00; 
    margin: 0 0 0 20px; 
    padding: 100px 0; 
    position: relative; 
    width: 400px; 
} 

h1 { 
    background: #00f; 
    color: #fff; 
    left: -20px; 
    padding: 0 20px; 
    position: absolute; 
    width: 100%; 
} 

http://jsfiddle.net/d7KJ9/4/

Niestety chociaż dodawanie treści po h1 wydaje się złamać tę metodę:

http://jsfiddle.net/d7KJ9/2/

Co więcej, gdyby powyższa metoda zadziałała, niekoniecznie byłaby lepsza niż użycie marginesu ujemnego (w rzeczywistości wymaga to większej liczby stylów CSS).

Podsumowując, wystarczy przejść do rozwiązania z marginesem ujemnym, marginesy ujemne niekoniecznie muszą być złe, gdy są właściwie stosowane, po prostu z własnego powodu przed użyciem (czy jest lepszy sposób na osiągnięcie tego, czego pragniesz?)

Answer 3

Można użyć position:relative a następnie left na #h1:

.container { 
    width: 400px; 
    height: 500px; 
    background: red; 
    margin: 0 auto; 
} 

#h1 { 
    width: 400px; 
    height: 40px; 
    left: -30px; 
    background: blue; 
    padding: 0 30px; 
    position: relative; 
    top: 40px; 
} 

Wypróbuj go w JSBin