主页 / 问题 / 1103120
Accepted
Степан
Asked:2020-03-31 06:30:27 +0000 UTC2020-03-31 06:30:27 +0000 UTC

边距顶部无法正常工作

  • 772

和浏览器的顶部边缘之间有一个header我没想到会看到的间隙，甚至top元素的定位也不起作用。.company

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.general {
  height: 6200px;
}

.company {
  text-transform: uppercase;
  font-size: 24px;
  margin-top: 560px;
  margin-left: 12%;
  color: white;
}

header {
  width: 100%;
  background-color: black;
  height: 12.7%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>page1</title>
  <link rel="stylesheet" type="text/css" href="style2.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>

<body>
  <div class="general">
    <header>
      <div class="company">mycompany</div>
    </header>
  </div>
</body>

</html>

вёрстка

2 个回答

  1. Best Answer

    与浏览器的顶部边缘之间有一个header我没想到会看到的间隙

    这是意料之中的，因为这个空白是由元素上设置的company属性创建的margin-top: 560px;

    甚至top元素的定位也不起作用.company

    要使top元素上的属性起作用.company，该元素需要设置该属性的值position。最有可能的是，您计划确定从父元素general的上边缘到子元素的上边缘的距离.company。让我们假设它是。所以对于general你需要设置的元素position: relative。

    现在让我们对您的代码进行所有这些更改：

    * {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.general {
  height: 6200px;
}

.company {
  text-transform: uppercase;
  font-size: 24px;
  /*margin-top: 560px; Удаляем*/
  margin-left: 12%;
  color: white;
  position: relative; /*Добавляем*/
  top: 12%; /*Добавляем*/
}

header {
  width: 100%;
  background-color: black;
  height: 12.7%;
}
    <div class="general">
  <header>
    <div class="company">mycompany</div>
  </header>
</div>

    从中可以得出什么结论？

    边距顶部无法正常工作

    在您的问题中，根据您设置的样式，代码完全正确。问题是你得到了你所得到的，而不是你计划得到的结果。答：margin-top它工作正常。

    为了使样式表正常工作，您需要了解 CSS 语法，这是一组描述样式的规则，描述了网页上各个元素的格式（外观变化）。

    • 2

  2. 有一些默认的浏览器显示选项，要删除它们，请参见：
    https ://htmlacademy.ru/blog/boost/frontend/about-normalize-css
    https://necolas.github.io/normalize.css/

    • 0

相关问题