CODEWITHSUNDEEP
csshtmlmarginpadding
user2902009
user2902009

Reputation: 55

CSS Unknown Margin/Padding Showing Up

There seems to be an unknown margin or padding that comes in between my header navi ID tags.

Here are the div tags:

<div id="container">

     <div id="header">
          <p align="center">HEADER</p>
     </div>

     <div id="navi">
          <p align="center">NAVIGATION</p>
     </div>

</div>

The stylesheet that goes with it:

#container
{
    width: 800px;
    background-color: #AFAF97;
    margin: 0px auto;
}

#header
{
    height: 75px;
    width: 100%;
    background-color: #888888;
}

#navi
{
    height: 50px;
    width: 100%;
    background-color: #aaaaaa;
    /*margin-top: -16px;*/
}

Here's the screenshot of the unknown margin/padding. https://i.sstatic.net/v7FMg.jpg

The alternative fix is to put a negative margin-top value. But why and how is it there?

Upvotes: 3

Views: 7357

Answers (4)

Sobin Augustine
Sobin Augustine

Reputation: 3775

Always use reset styles

* {
    margin: 0;
    padding: 0;
}

Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.

a little more advanced css reset.

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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

fixed:demo

Upvotes: 4

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

demo

css

*{
    margin:0;
    padding:0;
}
body{
    margin:0;
    padding:0;
}

Upvotes: 0

jswolf
jswolf

Reputation: 130

get in css

* {
    margin:0;
    padding:0;
}

Upvotes: 1

Ruddy
Ruddy

Reputation: 9923

Like I said in the comment its coming from your <p> tags. The following should fix it.

You can get rid of it like:

#container p {
    margin: 0;
}

DEMO HERE

Upvotes: 3

Related Questions