जब मैं पाठ को शीर्ष-मार्जिन देता हूं तो पूरी छवि क्यों नीचे आती है? - एचटीएमएल, सीएसएस

एचटीएमएल के बाद, पृष्ठभूमि और पाठ में एक तस्वीर प्रदर्शित करता है एनएचएस सदस्यता इस पर लिखा है। अब जब मैं देता हूं class="nhs_head" margin-top छवि के साथ पाठ नीचे चला जाता है। ऐसा क्यों है ?

मैं सिर्फ मार्जिन टेक्स्ट कैसे दे सकता हूं?

<body>
<div class="image_holder">
<div class="nhs_head"> NHS SUBSCRIPTION </div>
</div>
</body>

सीएसएस:

    .image_holder {
position:relative;
background-image:url(bg2.jpg);
height:768px;
width:1366px;
}

.nhs_head {
display:block;
width:60%;
margin:0 auto;
border:2px solid white;
font-family:Calibri;
font-weight:800;
font-size:30px;
color:white;
}

उत्तर:

जवाब के लिए 0 № 1

डेमो

अगर आप आवेदन करना चाहते हैं margin-top पाठ करने के लिए आप अपेक्षाकृत स्थानित छवि div में पाठ को पूर्ण स्थिति में रख सकते हैं।

सीएसएस

body, html {
margin:0;
}
.image_holder {
position: relative;
background-image:url("http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg");
height:768px;
width:1366px;
}
.nhs_head {
width:60%;
margin:0 auto;
border:2px solid white;
font-family:Calibri;
font-weight:800;
font-size:30px;
margin-top: 30px;
color:white;
position: absolute;
left:0;
right:0;
margin-top: 30px;
}

संबंधित सवाल
सबसे लोकप्रिय