0

I want to remove the white spaces around (as you can see in the image there's a thick white spaces on every corner), how can I do that? It seems that it is created by default and needs something to do to remove that. I've tried to add margin: -10px but it looks like not the right way to do as it messes up the view on the below content.

enter image description here

Here's my code: 

header, footer {
    padding: 1em;
    color: white;
    font-family: "Calibri";
    background-color: #000000;
    clear: left;
    text-align: center;
}

/* Navbar start */
ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    font-family: "Calibri";
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #111;

}

.active {
    background-color: #009933;
}
/* Navbar end */

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav li {
    float: none;
}
nav ul {
    list-style-type: disc;
    padding: 0;
    margin: 10px;
}

nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<header>
   <h1>Header</h1>
</header>
  
<ul class="navbar">
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">Peripherals</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#about">About</a></li>
</ul>

<nav>
 <ul>
  <li>Item1</li>
  <li>Item2</li>
 </ul>
</nav>

<article>
 <h1>Item1</h1>
 <p>Description for item1 here.</p>
</article>


<footer>Copyright (c) KPA</footer>

</body>

</html>
Baezid Mostafa
  • 2,680
  • 2
  • 14
  • 26
KPA
  • 173
  • 2
  • 4
  • 12

5 Answers5

3

the problem is margin of your body element. set like this

body {margin: 0;}
2

css reset

This css reset by eric meyer is simply amazing. It will remove those spaces.

The other way around is to set 

margin: 0;
padding: 0;
THCoder
  • 142
  • 10
  • I have used only margin: 0 and it seems to work, may I know what does the padding do? – KPA Oct 16 '16 at 09:28
  • Some browsers like Opera, they don't use margin. Instead, they use padding to make those spaces occur inside your document. So to be safe, just set both margin and padding to 0. – THCoder Oct 16 '16 at 09:29
  • Padding is between content and border. Margin is after border. Check this for more info http://www.w3schools.com/css/css_boxmodel.asp – Moussa Khalil Oct 16 '16 at 09:32
  • Normally, Browsers set around 8px of margin or padding around your document. Browsers like Chrome or Firefox, they use margin to do so. But browsers like Opera, they use padding to make that 8px of space around your document. Hope this help! – THCoder Oct 16 '16 at 09:34
  • @THCoder - Which versions of Opera? No modern version of Opera uses padding for that. – Alohci Oct 16 '16 at 09:45
  • [here](http://www.opera.com/docs/specs/opera7/) I have found this article to support my answer. Hope this helps! – THCoder Oct 16 '16 at 10:06
2

You have to add a line style css at top of page.

html,body{ margin:0}

Thanh Tang
  • 51
  • 1
  • 4
2

You can use the CSSReset library or:

body {
   margin: 0;
   padding: 0;
}
Luka Kerr
  • 4,161
  • 7
  • 39
  • 50
user2226755
  • 12,494
  • 5
  • 50
  • 73
0

Try

.article{ 
padding: 0em;
}

Similar with .nav{padding: 0em;}

Verneet
  • 1
  • 3