CSS & HTML |将 HTML 标头粘贴到屏幕顶部而无需填充 [重复]答案

【问题标题】：CSS & HTML | Have an HTML header stick to top of screen without padding [duplicate]CSS & HTML |将 HTML 标头粘贴到屏幕顶部而无需填充 [重复]
【发布时间】：2021-03-04 10:59:22
【问题描述】：

我正在尝试在屏幕顶部创建一个彩色块/标题。我希望它拥抱顶部、左侧和右侧/相反，它们似乎是一些填充或边缘，这是我不想要的。

.row {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

header {
  height: 100%;
  padding: 0;
}

.bg-primary {
  background-color: #ffcc80 !important;
}

.align-items-center {
  align-items: center !important;
}

.py-0 {
  padding-top: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.py-6 {
  padding-top: 4.5rem !important;
}

.pb-6,
.py-6 {
  padding-bottom: 4.5rem !important;
}

.py-7 {
  padding-top: 6rem !important;
}

.pb-7,
.py-7 {
  padding-bottom: 6rem !important;
}

.py-8 {
  padding-top: 8rem !important;
}

<div class="header bg-primary pb-6">
  <div class="container-fluid">
    <div class="header-body">
      <div class="row align-items-center py-4">
      </div>
    </div>
  </div>
</div>

这是一个代码笔： https://codepen.io/balFB373/pen/eYzwvBJ

我希望它看起来像这样：

我试过margin:0 !important; 和padding:0 !important 还是不行。我是 CSS 新手，希望能得到帮助。

【问题讨论】：

请将css和html添加到您的问题中。

标签： html css padding margin

【解决方案1】：

您可以使用 usr * 选择器来设置所有元素的边距和填充 0，并且通常将位置粘性与顶部元素中的顶部 0 一起使用，该顶部元素是 body 的子元素而不是后代，以使其粘在顶部

【讨论】：

【解决方案2】：

html body 元素通常带有一些已在某些浏览器自己的供应商样式表中设置的默认边距。

你可以用margin: 0;覆盖它

body {
  margin: 0;
}

.row {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

header {
  height: 100%;
  padding: 0;
  git-to-screen
}

.bg-primary {
  background-color: #ffcc80 !important;
}

.align-items-center {
  align-items: center !important;
}

.py-0 {
  padding-top: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.py-6 {
  padding-top: 4.5rem !important;
}

.pb-6,
.py-6 {
  padding-bottom: 4.5rem !important;
}

.py-7 {
  padding-top: 6rem !important;
}

.pb-7,
.py-7 {
  padding-bottom: 6rem !important;
}

.py-8 {
  padding-top: 8rem !important;
}

<div class="header bg-primary pb-6">
  <div class="container-fluid">
    <div class="header-body">
      <div class="row align-items-center py-4">
      </div>
    </div>
  </div>
</div>

相关：看到这个关于Browsers' default CSS for HTML elements的问题。

【讨论】：