如何删除 div 元素和图像周围的白边距？答案

【问题标题】：How to remove white margins around div element and image?如何删除 div 元素和图像周围的白边距？
【发布时间】：2019-01-21 18:30:44
【问题描述】：

我正在尝试删除标题照片周围的空白，它应该覆盖整个页面。我正在我的计算机 (localhost) 上运行本地服务器来测试这个 PHP 文件。

我已经尝试了可以在 Stack Overflow 上找到的所有相关答案。我查找了多个线程并完成了以下操作： 1) 通过将边距和填充更改为 0 来重置 CSS 样式 2）用body标签包围图像标签，现在应该重置 3) 将宽度设置更改为 100%，将高度设置为自动

index.php:

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="container">
    <img class="image" 
src="https://cdn.shopify.com/s/files/1/0533/2089/files/header- 
design-position-absolute_fcabc9a2-0fdb-4057-a6fb-f84f16840eba.png? 
v=1507118933" alt="Header Picture">
    <div class="name"> ⏤ NAME ⏤ </div>
<div class="tagline"> traveler. consultant. developer.</div>
    </div>
</body>
<html>

style.css：

* { 
    margin:0; 
    padding:0; 
}
/* container holding both the header photo and text */
.container {
     position: relative;
     text-align: center;
     color: white;
} 
/* main header image */
.image {
    filter: drop-shadow(8px 8px 10px gray); filter: contrast(75%);
    width: 100%;
    height: auto;
}
/* name text */
.name {
    position: absolute;
    top: 17.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 600%;
    font-weight: bold;
    overflow: hidden;
white-space: nowrap;
}
/* tagline text */
.tagline {
    position: absolute;
    top: 23.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 200%;
    font-family: "Comic Sans MS", cursive, sans-serif;
}

我想要的只是图片周围没有空白区域，这样它就可以延伸到整个页面。相反，我不断在边缘周围出现无法摆脱的空白。

更新我现在正在实施一些更改，看看为什么这个简化版本突然起作用了。它必须在我的其余代码中（我没有包含在内）让我先用它的其余部分重新更新这段代码。

【问题讨论】：

提供有问题的截图。它实际上可以根据需要在这里工作。
我能看到的唯一空白是底部的下降部分，你可以用vertical-align:top;或display:block解决这个问题
我认为你的图片本身就有空格，我在这里测试了你的代码，它可以工作jsfiddle.net/5bLv4rzw
图片没有合适的高度来拉伸整个窗口。换个法师试试

标签： html css

【解决方案1】：

这在本地和 jsfiddle 上测试时效果很好。但是，您的 HTML 缺少 <head> 标记。 CSS <link> 应该放在里面。

【讨论】：

【解决方案2】：

我在这里的第一个建议是使用 background-image CSS 属性，这样您就可以更好地控制图像框，然后您可以设置实际的页面正文或部分来呈现图像。

.your-image {
  background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

需要注意的一点是，屏幕阅读器中包含<img> 标签，而背景图片不包含，这使得您的网站对使用屏幕阅读器的用户更加友好，因为这里的背景与内容的相关性较低。

需要考虑的一点是，所有 HTML 元素都有自己预定义的边距和内边距以及其他属性，具体取决于它们在其中呈现的浏览器，例如 <body> 元素上放置的 8px 边距大多数浏览器中的默认值，可以通过显式定义在您的代码中覆盖。

顺便说一句，有一些库可以帮助我们解决不同浏览器之间的不一致以及它们如何呈现我们的元素，我会看看normalize.css，这是一个很棒的纯 CSS 库，包含大量文档。

【讨论】：

【解决方案3】：

您的图片似乎有问题，所以请尝试裁剪图片。

* { 
    margin:0; 
    padding:0; 
}
/* container holding both the header photo and text */
.container {
     position: relative;
     text-align: center;
     color: white;
} 
/* main header image */
.image {
    filter: drop-shadow(8px 8px 10px gray); filter: contrast(75%);
    width: 100%;
    height: auto;
}
/* name text */
.name {
    position: absolute;
    top: 17.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 600%;
    font-weight: bold;
    overflow: hidden;
white-space: nowrap;
}
/* tagline text */
.tagline {
    position: absolute;
    top: 23.5%;
    left: 40%;
    transform: translate(-30%, 50%);
    font-size: 200%;
    font-family: "Comic Sans MS", cursive, sans-serif;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style=" background-color: #000000">
<div class="container">
    <img class="image" 
src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Header Picture">
    <div class="name"> ⏤ NAME ⏤ </div>
<div class="tagline"> traveler. consultant. developer.</div>
    </div>
</body>
<html>

【讨论】：