मार्जिन टॉप से ​​दूसरे div के अंदर div

Question

मेरे पास दो divs हैं जिनमें पृष्ठभूमि छवि है और मैं दूसरे div में मार्जिन जोड़ना चाहता हूं लेकिन यह सफेद स्थान बना रहा है।

div को अन्य div के अंदर रखते हुए शीर्ष मार्जिन कैसे जोड़ सकता हूं?

<div class="background"> 
    <div class="logo"> 
    </div> 
</div> 

.logo { 
    background-image: url(image/logo2.png); 
    height:40px; 
    width:400px; 
    margin-left:100px; 
    display:block; 
    margin-top:20px; 
} 

.background { 
    background-image: url(image/empback.png); 
    width:100%; 
    height:94px; 
    min-width:1345px; 
} 

Answer 1

आप cssposition संपत्ति यहां की एक उपयोग कर सकते हैं।

नमूना कोड

<div class="background"> 
    <div class="logo"> 
    </div> 
</div> 

.logo 
{ 
    background-image: url(image/logo2.png); 
    height:40px; 
    width:400px; 
    margin-left:100px; 
    display:block; 
    position:absolute; 
    top:20px; 
} 

.background 
{ 
    background-image: url(image/empback.png); 
    width:100%; 
    height:94px; 
    min-width:1345px; 
    position:relative; 
} 

margin-top:20px; हटाने और .logo के लिए position और top संपत्ति जोड़ें।

Answer 2

आप पेरेंट तत्व

.background{ 
    background: #f00; 
    width:100%; 
    height:94px; 
    min-width:1345px; 
    overflow: auto; 
} 

Demo

बस share के लिए एक लिंक मिल गया है जो इस समस्या से संबंधित है पर overflow: auto उपयोग कर सकते हैं।

---

इसके अलावा, इस दिशा में एक बेहतर दृष्टिकोण के बजाय position: absolute; का उपयोग कर के आप top साथ position: relative;, left, right और bottom गुण है, जो केवल नाव में तत्व शामिल नहीं होंगे उपयोग करना चाहिए है, यह भी आप स्थिति से बचा लेगा एक ही ब्लॉक में अन्य तत्व।

Demo 2

Answer 3

बस कोड का अध्ययन करें।

बस स्थिति और शीर्ष मूल्य बदलकर हम परिणाम प्राप्त कर सकते हैं।

.logo{ 
position:relative; 
top:10px; 
background-color:black; 
height:40px; 
width:400px; 
margin-left:100px; 
display:block; 
margin-top:20px; 
} 

.background{ 
    position:absolute; 
    background-color:green; 
width:100%; 
    top:50px; 
height:94px; 
    min-width:1345px; 
}