HTML全屏图像边距问题答案

【问题标题】：HTML Full Screen Image Margin IssueHTML全屏图像边距问题
【发布时间】：2015-07-17 23:47:24
【问题描述】：

好的，我知道 margin:0 样式表确保我的全屏图像周围没有白色背景边框，完全适合屏幕，周围没有任何边框/边距。问题是，我只能将此样式表应用于正文标记。但随后 我的 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>

【问题讨论】：

文本从body继承边距值。只需创建另一个 CSS 类 #text{ margin: 20px; } 或您想要的任何文本边距，然后将文本包装在 <div id='text'>
我试过了，但没用。就像我说的，到目前为止，marine:0 样式只适用于我的 body 标签。请参阅参考 #1
你用的是什么浏览器？我已经尝试过最新的 FF 和 IE 9，看起来还不错。我尝试了 2 个不同的大图像，并且文本在图像下方完全可见。

标签： html css

【解决方案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 图像之外，所有内容都会有一个白色“边框”

【讨论】：

没有更简单的方法吗？这个想法是我只需要图像没有边距，页面上的所有其他内容（div、段落、文本、各种其他东西）都有边距。按照这种方法，我将不得不为图像以外的所有其他内容提供一个“测试”类。有没有像负填充这样的东西我可以只给图像？
感谢您的帮助。在看到您的更新之前，我尝试了 div 位置属性，结果证明可以覆盖边距。所以我可以简单地将分隔线向左移动到顶部并增加图像大小，这也将使其完全全屏