बच्चे को पैरेंट चौड़ाई से अधिक कैसे ठीक से बनाया जाए?

Question

मेरे पास एक अभिभावक (कंटेनर) और एक बच्चा है (एक एच 1 हेडर/ब्लॉक)।

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

समस्या सही करने के लिए बाईं ओर 30 पिक्सल और 30 पिक्सल माता पिता से बाहर खींच के बजाय, यह सही करने के लिए 60 पिक्सल बाहर फैला है, किसी कारण के लिए है। अभी मैं इसे वापस खींचने और इसे बनाने के लिए -30 पीएक्स का एक नकारात्मक बाएं मार्जिन सेट करता हूं, लेकिन मैं सोच रहा था कि ऐसा करने के लिए एक बेहतर/उचित तरीका है या नहीं?

यही होता है की एक तस्वीर है:

यह मैं क्या यह की तरह लग रहे करना चाहते हैं की एक तस्वीर है (और यह नकारात्मक मार्जिन के साथ की तरह लग रहे करने के लिए मिल गया):

Answer 1

एक नकारात्मक मार्जिन पूरी तरह ठीक है। या आप पूर्ण और सापेक्ष स्थिति के साथ अधिक प्रोग्रामिक रूप से स्थिति बना सकते हैं।

सीएसएस

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

एचटीएमएल

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

Codepen example.

Answer 2

नकारात्मक मार्जिन इस मामले वास्तव में जाने के लिए एक ही रास्ता है (और कुछ मामलों में से एक है जहां मैं इसे स्वीकार्य उपयोग मानता हूं)।

वहाँ अन्य समाधान आप का पता लगाने सकता है (उदाहरण के लिए लाल bg एक केन्द्र गठबंधन bg छवि के रूप में स्थापित किया है, तो h1 बाहर सामग्री के लिए गद्दी के साथ div की है) लेकिन वहाँ एक नकारात्मक का उपयोग करने पर यह कर के लिए कोई बोनस वास्तव में मार्जिन, वास्तव में लंबी अवधि में यह कम रखरखाव योग्य है।

जैसा कि पहले से ही सुझाव दिया गया है, आप इसे हल करने के लिए स्थिति का उपयोग भी कर सकते हैं (नीचे उदाहरण देखें)।

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> 

सीएसएस:

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

दुर्भाग्य से, हालांकि h1 के बाद सामग्री जोड़ने के लिए इस विधि को तोड़ने के लिए लगता है:

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

इसके अलावा, अगर उपर्युक्त विधि काम करती है, तो यह नकारात्मक मार्जिन (वास्तव में अधिक सीएसएस शामिल करने) की तुलना में बेहतर नहीं होगा।

निष्कर्ष में, केवल नकारात्मक मार्जिन समाधान पर जाएं, नकारात्मक मार्जिन उचित रूप से उपयोग की जाने वाली एक बुरी चीज नहीं है, केवल उनका उपयोग करने से पहले स्वयं के साथ कारण (क्या आप जो चाहते हैं उसे पूरा करने का एक बेहतर तरीका है?)

Answer 3

आप position:relative#h1 पर उपयोग कर सकते हैं और फिर left:

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

का उपयोग करके नकारात्मक मार्जिन ठीक है JSBin