Spaces between elements

Question

I'm trying to remove blank spaces between my elements, but whatever I'm trying to do, it doesn't seem to work. Could you guys help me out a bit?

I've tried manually removing margins from headlines, putting everything into "wrapper" class, and editing it in CSS. But none of that seems to be working, only messing up with my code, if so.

Is there something in my code that prevents those solutions from working correctly?

HTML code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"<
</head>

<body>

<div class="container">
<header>
<h1>My website</h1>
</header>

<nav>
    <ul>
        <li>Nav1</li>
        <li>Nav2</li>
        <li>Nav3</li>
        <li id="about">About</li>
    </ul>
</nav>

<article>
    <h1>Welcome!</h1>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</article>

<footer>
Copyright © .com
</footer>

</div>
</body>

</html>

CSS

.container {
    width: 1000px;
    height: 800px;
    border: solid;
    border-color: black;
    white-space-collapsing: discard;


} 

header, footer {
    text-align: center;
    background: red;


}


nav {
    background: blue;
    margin: 0;

}
nav ul {

}

nav ul li {
    display: inline-table;
    padding: 0 60px 0 0;
    margin-bottom: 0;
}
    #about {
    float: right;
    }



article {

    margin: 0;
    background: yellow;
    text-align: center;
    padding: 0;

}

What do you mean by "spaces between items"? you mean between my website, nav and welcome headings? — YOU, Nov 28 '16 at 22:46
Is it solved...?consider accepting one of the answers so that it helps others when such problem occurs to the — Geeky, Dec 03 '16 at 06:36

score 1 · Answer 1 · edited May 23 '17 at 12:24

Thats because your elements are styled as per the browser style sheet. So in order to not get into this, you should use a css reset / normalize.

You could read more about Normalize and Reset here

h1, ul, p{
  margin:0;
}
.container {
  width: 1000px;
  height: 800px;
  border: solid;
  border-color: black;
  white-space-collapsing: discard;
}
header,
footer {
  text-align: center;
  background: red;
}
nav {
  background: blue;
  margin: 0;
}
nav ul {} nav ul li {
  display: inline-table;
  padding: 0 60px 0 0;
  margin-bottom: 0;
}
#about {
  float: right;
}
article {
  margin: 0;
  background: yellow;
  text-align: center;
  padding: 0;
}

<div class="container">
  <header>
    <h1>My website</h1>
  </header>

  <nav>
    <ul>
      <li>Nav1</li>
      <li>Nav2</li>
      <li>Nav3</li>
      <li id="about">About</li>
    </ul>
  </nav>

  <article>
    <h1>Welcome!</h1>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </article>

  <footer>
    Copyright © .com
  </footer>

</div>

score 0 · Answer 2 · answered Nov 28 '16 at 22:49

0

p , h1 , ul have defaults margins, you can remove it with:

p, h1, ul {
   margin: 0;
}

answered Nov 28 '16 at 22:49

Troyer

6,765
3
34
62

score 0 · Answer 3 · answered Nov 28 '16 at 22:49

0

Try line-height:0; and/or margin: 0;to remove spaces between heading/text.

answered Nov 28 '16 at 22:49

YOU

1,030
1
7
22

score 0 · Accepted Answer · answered Nov 28 '16 at 22:54

To make things consistent across different browsers (setting padding and margins to 0, same font sizes, etc) you can include a CSS reset file. This should be at the very top of your styles.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

http://meyerweb.com/eric/tools/css/reset/

Spaces between elements

4 Answers4