gpt4 book ai didi

HTML 全屏图像边距问题

转载 作者:太空宇宙 更新时间:2023-11-04 03:53:21 25 4
gpt4 key购买 nike

好的,我知道 margin:0 样式表确保我的全屏图像周围没有白色背景边框,完全适合屏幕,周围没有任何边框/边距。问题是,我只能将此样式表应用到 body 标签。但是随后我的 body 标签中的所有文本都与图像一起完全向左移动,隐藏了一些文本。基本上,我希望 margin:0 样式仅应用于图像和不是文字。我尝试了各种方法,例如将该标签应用到一个 div 并将图像放入一个 div 中......等等,但它不起作用。 margin 属性似乎只适用于 body 标签。

下面的猫头鹰图像是完全全屏的并且工作正常,但是它下面的一些文本向左移动了两个(因为边距现在为 0)并被隐藏了。

<html>
<head>
<style>
body
{
margin:0;
}
</STYLE>
</head>
<body>

<div id="test">
<img src="owl.jpg">
</div>

THIS TEXT GETS SHIFTED TO THE LEFT HIDING SOME OF IT
</body>
</html>

求助!

引用文献1

 <html>
<head>
<style>
.test
{
margin:0;
}
</style>
</head>
<body>
<div class="test" id="test">
<img src="owl.jpg">
</div>
The image now has a margin around it and is not completely full-screen. Same thing for this text
</body>
</html>

最佳答案

如果您想要窗口边缘旁边的任何内容,则应将边距设置为 0。但是,如果您希望文本向后移动,则可以将其包装在容器中并设置格式。

<html>
<head>
<title>by the way title is mandatory</title>
<style>
body { margin: 0; }
.text { padding-left: 10px; }
</style>
</head>
<body>

<div id="test"><img src="owl.jpg" /></div>
<div class="text">
THIS TEXT GETS NOW SHIFTED FROM THE LEFT BY A LITTLE
</div>

</body>
</html>

编辑

虽然我建议在 body 标签内添加一个包装器(有助于稍后构建),但如果您真的想在没有它的情况下进行包装,您可以使用这种样式:

body { margin: 10px; }
#test { margin-left: -10px; }

这将为正文添加边距,因此除#test 图像外,所有内容都将有一个白色“边框”

关于HTML 全屏图像边距问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23122151/

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