在React应用程序中删除div上方的空格

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）都带有一组默认规则（用户代理样式表），并设置了诸如marginin中ul的规则，因此您可能会将margin-top（-webkit-margin-before: 1em;）设置为ul。

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

ul {
  margin-top: 0;
}