Question

好的，我知道边距：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>

Answer 1

如果你想要在窗口边缘旁边的任何东西，那么你应该将边距设置为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全屏图像保证金问题

1 个答案: