Html 当我给文本加上上页边空白时,为什么整个图像会下降?

Html 当我给文本加上上页边空白时,为什么整个图像会下降?,html,css,Html,Css,在HTML之后,在背景中显示一张图片,并在上面显示nhs订阅的文本。现在,当我给class=nhs\u标题空白时,顶部文本和图像一起向下移动。为什么会这样 我怎么能给文本留空白呢 <body> <div class="image_holder"> <div class="nhs_head"> NHS SUBSCRIPTION </div> </div> </body> 如果要将边距顶部应用于文本,可

在HTML之后,在背景中显示一张图片,并在上面显示nhs订阅的文本。现在,当我给class=nhs\u标题空白时,顶部文本和图像一起向下移动。为什么会这样

我怎么能给文本留空白呢

<body>
<div class="image_holder"> 
    <div class="nhs_head"> NHS SUBSCRIPTION </div>       
</div>
</body>
如果要将边距顶部应用于文本,可以将文本定位在相对定位的图像div中

css


请参见此问题:使用填充顶部而不是边距顶部@j08691应用边界属性时会发生什么!我也必须给它一个边界
    .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;
}
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;
}