Question

我有一个问题，我已经创建了一个标题组件但是每个页面上的标题上方仍有空格我在

中提取标题组件

这是我的整个标题组件：

import React from 'react';
import { Link } from 'react-router';
import './index.scss';

export default class Header extends React.Component {

  render() {
    return(
      <div className="container">
        <ul>
          <div className="links">
              <li><Link to="quizzes">Quizzes</Link></li>
            </div>
            <div className="links">
              <li><Link to="categories">Categories</Link></li>
            </div>
            <div className="links">
              <li><Link to="create">Create</Link></li>
          </div>
        </ul>
      </div>
    )
  }
}

这是我的整个css

body {
  margin: 0;
}
.container {
  margin: 0;
  background-color: #bec0c4;
  height: 50px;
  width: 100%;
}
.container ul{
  display: flex;
  flex-direction: row;
  font-size: 20px;
  justify-content: space-between;
  list-style-type: none;
  width: 90%;
}

我已经看到许多答案说要将边距设置为0，但这仍然给我顶部的空白。如果我将margin-top设置为-20px，它会删除它，但我不喜欢这个解决方案

Answer 1

大多数浏览器（例如Chrome）都附带一组默认规则（用户代理样式表），并在margin中设置ul之类的规则，因此您可能拥有margin-top （-webkit-margin-before: 1em;）设置为ul。

在margin-top: 0上设置ul将删除空格：

ul {
  margin-top: 0;
}

Answer 2

我已将margin的{{1}}设置为零（并包含填充以强制默认重置）。如果这符合您的要求，请告诉我。

您可能希望查看normalize.css等工具以供将来使用。

ul

body {background-color: red;}
body, ul {
  margin: 0;
  padding: 0;
}

.container {
  background-color: #bec0c4;
  height: 50px;
  width: 100%;
}

.container ul {
  display: flex;
  flex-direction: row;
  font-size: 20px;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
  width: 90%;
  height: 100%;
}

Answer 3

我向margin: 0添加了.container ul，并且不会留下任何空格。它在Header组件之前留下了空格。这是现在的样子。

Answer 4

首先使用检查元素检查页面（Ctrl + shift + I = Windows中的Google chrome）。

然后检查<ul>是否正在占用空白，然后设置ul { margin:0; }或其他正在占用空间的元素。希望对您有帮助！

Answer 5

如果您在代码上应用reset.css，请确保页面加载了此reset.css。如果从主页-例如，index.js-开始加载，然后直接打开浏览器，则说about_us'页面-about_us.js-，则如果about.us.js无法加载reset.css，您将拥有一个包含所有浏览器默认样式的标准页面。

因此，请始终确保在所有路由上都加载reset.css，以避免默认浏览器页面溢出。

Answer 6

就我而言，以下代码片段有效（在 app_directory/src/index.css 中提到过）

* {
  margin-top: 0;
}

在react app中删除div上方的空格

6 个答案: