Question

我是初学者，以某种方式我无法从h1元素中删除空白。我不知道问题是什么。

<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="Resources/css/style.css">
  <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
  <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
  <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400&display=swap" rel="stylesheet">
  <title>Omnifood</title>
</head>

<body>
  <header>
    <div class="hero-text-box">
      <h1>Goodbye junk food. Hello super healthy meals.</h1>
      <a href="#">I’m hungry </a>
      <a href="#">Show me more </a>
    </div>
  </header>

</body>

</html>

Answer 1

按以下顺序重新排列链接标签

<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"> <!-- reset default styling -->
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css"> <!-- add grid support -->
<link rel="stylesheet" type="text/css" href="Resources/css/style.css"> <!-- apply custom styles to your code -->

Answer 2

您可以将style.css重新排序为normalize.css之后，也可以使用!important强制CSS：

h1 {
  margin: 0 !important;
}

Answer 3

这里有三种可能的解决方案：

1-在您的HTML中，首先包含normalize.css，然后包含其他将覆盖它的CSS文件：

<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="Resources/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">

2-您可以在normalize.css文件中使用更精确的选择器来覆盖style.css中的样式属性。例如，假设您的h1位于类container的div中，则可以执行以下操作：

.container h1 {
    margin: 0;
}

由于.container h1比h1中的normalize.css选择器更精确，因此该属性将被自动覆盖。

3-如果这些都不适合您，则可以使用!important来强制覆盖margin属性，如下所示：

h1 {
    margin: 0 !important;
}

Answer 4

首先对资源文件重新排序，然后在CSS中简单使用。记下 px 部分。

<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"> 
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="Resources/css/style.css">

CSS代码

h1 {
  margin: 0px;
}

我以某种方式无法覆盖normalize.css？

4 个答案: