时间戳

首页 > 解决方案 > 为什么我的内容和浏览器屏幕端之间存在分离？

html - 为什么我的内容和浏览器屏幕端之间存在分离？

问题描述

我网站上的所有内容与浏览器窗口的末尾之间有一个小的差距，我无法弄清楚它为什么会在那里。这就是我的英雄形象的 CSS 代码的样子。

这是该图像的 HTML，以及与我有相同分离问题的图像下方的横幅。

.container {
  position: relative;
  text-align: center;
  color: white;
}

.full-width-banner {
  position: auto;
  background-color: #466995;
  padding: 200px;
  top: 20px;
  text-align: center;
  height: 100px;
  text-height: 40px;
  width: 73%;
  overflow: none;
  color: white;
  font-family: 'Oswald', sands serif;
  font-size: 20px
}
<div class="full-width-banner">
  <h2> &ldquo;Change will not come if we wait for some other person or some other time. We are the ones we&rsquo;ve been waiting for. We are the change that we seek.&rdquo; </h2>
  <p>Barack Obama<p>
</div>

这是一张图片，在图片和左侧浏览器页面的末尾之间有一个空白。图片应该完全覆盖浏览器的一部分，两边都没有边框。与浏览器端分离的网站主图

我不知道为什么会发生这种情况或如何解决它。

标签： htmlcss

解决方案

默认情况下，您的浏览器会为您的主体添加几 px 的边距或/和内边距，只需确保在 CSS 的开头清除它，如下所示：

body {
  margin: 0;
  padding: 0;
}

img {
  display: block;
}
<img class="full-width-banner" src="https://ijnet.org/sites/default/files/styles/full_width_node/public/story/2020-07/cooper-baumgartner-J9QvzfkQM44-unsplash.jpg?h=8c0e36cd&itok=F6g99LH1">

推荐阅读