gpt4 book ai didi

html - 当我给文字上边距时,为什么完整的图像会下降?

转载 作者:行者123 更新时间:2023-11-28 09:42:18 26 4
gpt4 key购买 nike

在 HTML 之后,在背景中显示图片,并在上面写上 nhs subscription 文本。现在,当我给 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;
}

最佳答案

Demo

如果您想将 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;
}

关于html - 当我给文字上边距时,为什么完整的图像会下降?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25368559/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com