Background margin not 0

Question

There is a space between the Nav var and the title and I cant find out why

Setting Margin 0 on everything

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>

It should not be a margin between the 2 tags I dont now if there is a css tag that can eliminate it but I can think of any. Maybe there is a defult I need to change but I dont know what

Fix the syntax errors in your CSS and HTML (spelling, missing values, etc.). The margin is caused by the `
`. — Sebastian Simon, Dec 30 '18 at 01:20
(`Fix the [errors] in your CSS and HTML (spelling,…)` - while you're at it, let a spelling checker help you reduce the error rate in other texts (e.g., this question: **b**ar, **can't**, **don't know**, **default**…).) — greybeard, Dec 30 '18 at 05:57

score 0 · Answer 1 · answered Dec 30 '18 at 01:26

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>

score 0 · Answer 2 · answered Dec 30 '18 at 06:05

HTML elements have default browser values -like this:

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

Therefore there is a gap between h1 and ul. You can use * selector to set&define margin: 0 to all elements. An example below:

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>

Background margin not 0

2 Answers2