CODEWITHSUNDEEP
htmlcss
Akash kumar
Akash kumar

Reputation: 97

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

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>

Upvotes: 1

Views: 702

Answers (8)

Gerrit
Gerrit

Reputation: 1412

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?

Upvotes: 0

S4NDM4N
S4NDM4N

Reputation: 924

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.

Upvotes: 1

user8450943
user8450943

Reputation: 

<!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>

Upvotes: 0

Kavitha Velayutham
Kavitha Velayutham

Reputation: 703

Add these lines in your style sheet To reset CSS

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

}

Upvotes: -1

Johannes
Johannes

Reputation: 67768

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>

Upvotes: 0

Padma Rubhan
Padma Rubhan

Reputation: 293

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>

Upvotes: 1

kmg
kmg

Reputation: 519

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

margin:0
padding:0

Upvotes: 0

PraveenKumar
PraveenKumar

Reputation: 1861

<!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>

Upvotes: 0

Related Questions