Question

导航变量和标题之间有一个空格，我找不到原因

在所有内容上设置边距0

body {
  background: #000428;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #004e92, #000428);
  /* 
        Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #004e92, #000428);
  /* W3C, IE 
        10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

h1 {}

.Title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: #004e92;
}

.container {
  /*show heigh: auto*/
  display: flex;
  align-content: center;
  flex-direction: column;
}

.Background {
  border: 2px solid #004e92;
  align-self: center;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul {
  display: flex;
  Background-color: #004e92;
  border-top:
}

.Nav-bar {
  padding: 10px;
  list-style: none;
  margin: 0;
  font-size: 1em;
}

.push {
  margin-left: auto;
}

<html>

<head>
  <title>My blog</title>
  <link rel="stylesheet" href="Style.css">
</head>

<body>
  <h1 class="title">Hello comrades</h1>
  <div class="container-1">
    <ul class="List">
      <li class="Nav-bar">About me</li>
      <li class="Nav-bar">My contact</li>
      <li class="Nav-bar push">Youtube</li>
    </ul>
  </div>
  <div class="container">
    <img class="Background" src="Doggo.png" alt="">
  </div>
</body>

</html>

如果有一个可以消除它的css标签，那么我现在不要使用的2个标签之间不应有空白，但是我能想到的。也许我需要改变一下，但我不知道什么

Answer 1

body {
  background: #000428;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #004e92, #000428);
  /* 
        Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #004e92, #000428);
  /* W3C, IE 
        10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

h1 {
    margin : 0;
}
ul {
    margin : 0;
}
.Title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: #004e92;
}

.container {
  /*show heigh: auto*/
  display: flex;
  align-content: center;
  flex-direction: column;
}

.Background {
  border: 2px solid #004e92;
  align-self: center;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul {
  display: flex;
  Background-color: #004e92;
  border-top:
}

.Nav-bar {
  padding: 10px;
  list-style: none;
  margin: 0;
  font-size: 1em;
}

.push {
  margin-left: auto;
}

<html>

<head>
  <title>My blog</title>
  <link rel="stylesheet" href="Style.css">
</head>

<body>
  <h1 class="title">Hello comrades</h1>
  <div class="container-1">
    <ul class="List">
      <li class="Nav-bar">About me</li>
      <li class="Nav-bar">My contact</li>
      <li class="Nav-bar push">Youtube</li>
    </ul>
  </div>
  <div class="container">
    <img class="Background" src="Doggo.png" alt="">
  </div>
</body>

</html>

Answer 2

HTML元素具有默认的浏览器值，例如：

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Source: w3schools

因此，h1和ul之间存在差距。您可以使用*选择器为所有元素设置和定义margin: 0。下面的示例：

body {
  background: #000428;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #004e92, #000428);
  /* 
        Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #004e92, #000428);
  /* W3C, IE 
        10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

* { margin:0 }

.Title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: #004e92;
}

.container {
  /*show heigh: auto*/
  display: flex;
  align-content: center;
  flex-direction: column;
}

.Background {
  border: 2px solid #004e92;
  align-self: center;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul {
  display: flex;
  Background-color: #004e92;
  border-top:
}

.Nav-bar {
  padding: 10px;
  list-style: none;
  margin: 0;
  font-size: 1em;
}

.push {
  margin-left: auto;
}

<html>

<head>
  <title>My blog</title>
  <link rel="stylesheet" href="Style.css">
</head>

<body>
  <h1 class="title">Hello comrades</h1>
  <div class="container-1">
    <ul class="List">
      <li class="Nav-bar">About me</li>
      <li class="Nav-bar">My contact</li>
      <li class="Nav-bar push">Youtube</li>
    </ul>
  </div>
  <div class="container">
    <img class="Background" src="Doggo.png" alt="">
  </div>
</body>

</html>

背景边距不为0

2 个答案: