[英]Why does the complete image come down, when I give top-margin to the text?
按照HTML,在背景中顯示圖片,並在其上書寫文字nhs訂閱 。 現在,當我給class="nhs_head"
margin-top
文字與圖像一起向下移動。 為什么會這樣呢?
我怎樣才能給文本留出空白?
<body>
<div class="image_holder">
<div class="nhs_head"> NHS SUBSCRIPTION </div>
</div>
</body>
CSS:
.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;
}
如果要在文本上應用頁margin-top
,則可以將文本絕對定位在相對定位的圖像div中。
的CSS
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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.