Çocuğun üst genişliğini düzgün şekilde aşması nasıl sağlanır?

Question

Bir ebeveynim (kapsayıcı) ve bir çocuğum var (bir h1 üstbilgisi/blok).

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

sorun yerine sağa ebeveyn dışına sola 30 piksel ve 30 piksel germe nedeniyle, sağa 60 piksel geren, nedense içindir. Şu anda sadece geri çekmek ve hatta yapmak için negatif bir sol kenar boşluğu -30px ayarlıyorum, ancak bunu yapmak için daha iyi/uygun bir yol olup olmadığını merak ediyordum?

Bu nasıl bir şey görünmesini istediğimizi resmidir (ve negatif marjıyla gibi görünmek var):

Bu

ne bir resmi

Answer 1

Negatif bir kenar boşluğu tamamen iyi. Ya da daha programatik olarak mutlak ve göreli konumlandırma ile konumlandırabilirsiniz.

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

negatif marj gerçekten bu durumda gitmek için tek yoldur (ve bazı durumlarda biridir kabul edilebilir kullanım olduğunu düşündüğüm yerde).

keşfetmek olabilir diğer çözümler (örneğin kırmızı bg sonra h1 dışında içerik dolgu ile div 's var, merkezi hizalanmış bg görüntüsü olarak ayarladık) vardır ama hiçbir ikramiye olumsuz kullanılmasına göre bunu gerçekten var marj, aslında uzun vadede daha az sürdürülebilir. Önceden önerildiği gibi, bunu çözmek için konumlandırmayı da kullanabilirsiniz (aşağıdaki örneğe bakın).

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

h1 sonra içerik ekleyerek bu yöntemi kırmaya görünüyor maalesef gerçi

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

:

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

Ayrıca, yukarıdaki yöntem işe yaraydıysa, negatif marj kullanmaktan daha iyi olamaz (aslında daha fazla CSS içerir).

Sonuç olarak, sadece negatif marj çözümüne git, negatif marjlar uygun bir şekilde kullanıldığında mutlaka kötü bir şey değildir, bunları kullanmadan önce sadece bir neden (istediğiniz şeyi başarmak için daha iyi bir yol var mı?))

Answer 3

Sen #h1 daha sonra leftposition:relative kullanabilir ve:

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

negatif marj gayet kullanarak JSBin