好的，我知道 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/