How do i remove the space above and on the sides of the navigation bar?

Question

I am learning HTML & CSS and I want to know how can I remove the space above and on the sides of the navigation bar.The navigation bar should be in such a way that there is no space around it.Below is the code.Thanks in advance.

nav{
text-align:right;
padding-right:0px;
padding-top:0px;
}
ul{
color:white;
background-color:cyan;
padding-top:19px;
padding-bottom:19px;
padding-right:10px;
list-style:none;
margin-top:none;
}
.sb{
float:left;
}

<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>

</head>
<body>
<nav>
<ul>
<li>
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
<a href="www.az.com">Home |</a>
<a href="www.az.com/profile">Profile |</a>
<a href="www.az.com/settings">Settings</a>
</li></ul>
</nav>
</body>
</html>

Set `html,body{margin:0;padding:0;}` to remove default spacing of `html and body` — Abhishek Pandey, Aug 14 '17 at 10:06

score 1 · Answer 1 · answered Aug 14 '17 at 10:14

I guess, you looking for this.??

nav{
text-align:right;
padding-right:0px;
padding-top:0px;
}
ul{
color:white;
background-color:cyan;
padding-top:15px;
padding-bottom:19px;
padding-right:10px;
list-style:none;
margin:0px;
}
.sb{
float:left;
}
body{
margin: 0px
}

<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>

</head>
<body>
<nav>
<ul>
<li>
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
<a href="www.az.com">Home |</a>
<a href="www.az.com/profile">Profile |</a>
<a href="www.az.com/settings">Settings</a>
</li></ul>
</nav>
</body>
</html>

score 1 · Accepted Answer · answered Aug 14 '17 at 10:29

You wanted the navbar to not to have any white space around it. So I took you code and did some changed to it.

First is the HTML which I removed your <nav> and <ul> then replaced those parts with <div>.

Code:

<body>
<div class="div">
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
<div class="link">
<a href="www.az.com">Home |</a>
<a href="www.az.com/profile">Profile |</a>
<a href="www.az.com/settings">Settings</a>
</div>
</div>
</body>

After that I took your CSS and made changed to it to fit the query made by you.

Code:

.link{
  margin-left:80%
}
.div{
color:white;
background-color:cyan;
padding-top:19px;
padding-bottom:19px;
padding-right:10px;
height:10%;
}
.sb{
float:left;
margin-left: 2%;
}
body,html{
margin: 0;
padding: 0;
border: 0;
}

A working fiddle Here

Now your navbar doesn't have any white space up or right or left. Now it's up to your tinker it to fit your need.

Glad to hear that it worked then please mark the answer which worked as the best answer for the question and don't forget to vote. — S4NDM4N, Aug 14 '17 at 11:02

score 0 · Answer 3 · answered Aug 14 '17 at 10:07

<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>

<style>
html,body{
  margin:0;
  padding:0;
}
nav{
text-align:right;
padding-right:0px;
padding-top:0px;
}
ul{
color:white;
background-color:cyan;
padding-top:19px;
padding-bottom:19px;
padding-right:10px;
list-style:none;
margin-top:0;
}
.sb{
float:left;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
<a href="www.az.com">Home |</a>
<a href="www.az.com/profile">Profile |</a>
<a href="www.az.com/settings">Settings</a>
</li></ul>
</nav>
</body>
</html>

score 0 · Answer 4 · answered Aug 14 '17 at 10:14

0

Add the following style for body and ul tags, so that there is no space around the navigation bar.

margin:0
padding:0

answered Aug 14 '17 at 10:14

kmg

499
3
16

score 0 · Answer 5 · answered Aug 14 '17 at 10:15

Just add this rule to reset the browser's default margins and the default margins for ul which cause your white space above the navigation bar:

html, body {
  margin: 0;
}
ul {
 margin: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>My first css program</title>

  <style>
    html,
    body {
      margin: 0;
    }
    
    nav {
      text-align: right;
      padding-right: 0px;
      padding-top: 0px;
    }
    
    ul {
      color: white;
      background-color: cyan;
      padding-top: 19px;
      padding-bottom: 19px;
      padding-right: 10px;
      list-style: none;
      margin-top: none;
      margin: 0;
    }
    
    .sb {
      float: left;
    }
  </style>
</head>

<body>
  <nav>
    <ul>
      <li>
        <div class="sb">
          <input type="text" name="search">
          <input type="submit" name="search" value="search">
        </div>
        <a href="www.az.com">Home |</a>
        <a href="www.az.com/profile">Profile |</a>
        <a href="www.az.com/settings">Settings</a>
      </li>
    </ul>
  </nav>
</body>

</html>

score 0 · Answer 6 · answered Aug 14 '17 at 10:21

<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>

<style>
body{
margin:0px !important;}
nav{
text-align:right;
padding-right:0px;
padding-top:0px;
}
ul{
color:white;
background-color:cyan;
padding-top:19px;
padding-bottom:19px;
padding-right:10px;
list-style:none;
margin-top:0px;
}
.sb{
float:left;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
<a href="www.az.com">Home |</a>
<a href="www.az.com/profile">Profile |</a>
<a href="www.az.com/settings">Settings</a>
</li></ul>
</nav>
</body>
</html>

score 0 · Answer 7 · edited Jun 20 '20 at 09:12

First, great that you want to learn HTML and CSS. Keep learning, exercising and never stop asking! Times will come when you can help others aswell, keep rocking :)

Second, what you faced are CSS default vales. As for many things websites need to work even if they dont have any css applied to it. The reason for this is that "external" CSS (linking a css file to an html file) was developed years after HTML. Therefore the most HTML elements have default values to guarantee websites dont break. For your specific example the body element has default values too:

body {
  display: block;
  margin: 8px; /* this is what you do not want */
}

Official list of css default values - https://www.w3schools.com/cssref/css_default_values.asp

There are different approaches to get rid of default css values. In todays web is more likely to add a CSS file that adjust all default values to the same look, this is what Normalize.css is doing. The more radical one is Eric Meyers "CSS Reset", which removes all default styles.

I can highly recommend this Stack Overflow question if you want to go a bit deeper into this topic: What is the difference between Normalize.css and Reset CSS?

Kavitha Velayutham · Answer 8 · 2017-08-14T10:18:18.447

-1

Add these lines in your style sheet To reset CSS

body,html{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;

}

edited Aug 14 '17 at 10:18

answered Aug 14 '17 at 10:09

Kavitha Velayutham

663
1
9
27

How do i remove the space above and on the sides of the navigation bar?

8 Answers8

I can highly recommend this Stack Overflow question if you want to go a bit deeper into this topic: What is the difference between Normalize.css and Reset CSS?