Vertical navbar automatically leaves some white space at the top

Question

I am new to html and css and I wanted to create a navigational bar.
So I created a vertical navigational bar and I displayed 'hello world' on the right side of it.
I used a div tag for displaying 'hello world' and gave it some border and margin.
I wanted to have some top margin from the border, but when I used it, my entire navigational bar got affected.
What can I do so that my navigational bar doesn't get affected?

.hello {
    
    padding: 50px;
    margin-top: 50px;
    margin-left: 18%;
    margin-right: 150px;
    border-style: solid;
    border-width: 5px;
    text-align: center;

}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
  }


li a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
  }

li a:hover {
    background-color: #555;
    color: white;
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll website</title>
  <link rel="stylesheet" href="styles.css">

</head>
<body>
  <!-- Navbar section -->
  <div class="navbar">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
  
  <div class="hello">
    Hello world
  </div>

   
</body>
</html>

You could simply add `top:0;` on your `ul`. – Youssouf Oumar Jun 14 '22 at 07:52 — Youssouf Oumar, Jun 14 '22 at 07:52

score 0 · Answer 1 · answered Jun 14 '22 at 07:50

You applies margin-top: 50px on .hello. remove it and remove the body margin by adding body{margin:0;}.

body{
  margin:0;
}
.hello {
  padding: 50px;
  /* margin-top: 50px; */
  margin-left: 18%;
  margin-right: 150px;
  border-style: solid;
  border-width: 5px;
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 15%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #555;
  color: white;
}

<!-- Navbar section -->
<div class="navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</div>
<div class="hello">
  Hello world
</div>

score 0 · Answer 2 · answered Jun 14 '22 at 07:52

0

this is caused by margin-top

.hello {
    padding: 50px;
    margin-top: 50px; /* <- this part */
    margin-left: 18%;
    margin-right: 150px;
    border-style: solid;
    border-width: 5px;
    text-align: center;
}

try to remove it and white space at the top will be gone

answered Jun 14 '22 at 07:52

Muhammad Muflih

39
2

I want to have a top margin for .hello I just don't want to have a top margin for the navigational bar – Chaitanya Kale Jun 21 '22 at 07:00

score 0 · Answer 3 · answered Jun 14 '22 at 07:55

update your CSS code in the .hello class you add a margin-top: 50px that's why the gapping show in your top.

.hello {
    
    padding: 50px;
    margin-top: 0px;
    margin-left: 18%;
    margin-right: 150px;
    border-style: solid;
    border-width: 5px;
    text-align: center;

}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
  }


li a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
  }

li a:hover {
    background-color: #555;
    color: white;
  }

Vertical navbar automatically leaves some white space at the top

3 Answers3