Skip navigation
Currently Being Moderated

gap around div tag

May 4, 2013 8:18 PM

Hello Dreamweavers.

 

Ive made a div tag and Ive centered it in the middle of my page. But on the top there is a gap.

Ive seen some articles where it says to add:

 

margin: 0;

padding: 0;

 

Im doing so, but im still getting that gap on the top.

 

this is my CSS

 

#box1 {

          background-color: #00F;

          height: 200px;

          width: 600px;

          padding: 0px;

          margin: auto;

 

I have margin to Auto in order to center the box, is this correct?, there for I add the 0 padding in order to get rid of the gap.

 

u2a.jpg

 
Replies
  • Currently Being Moderated
    May 4, 2013 8:32 PM   in reply to inquestflash

    Best if you upload the page to some web space somewhere and post a link so we can take a look in our browsers.

     

    In the CSS, try

     

    #box1 {

              background-color: #00F;

              height: 200px;

              width: 600px;

              padding: 0px;

              margin: 0 auto;

     
    |
    Mark as:
  • Currently Being Moderated
    May 4, 2013 9:35 PM   in reply to inquestflash

    You could try adding the following to the top of the CSS

    * {

        margin: 0;

        padding: 0;

    }

    or better still, add a normalise script as in

    /*! normalize.css v1.1.1 | MIT License | git.io/normalize */

     

    /* ===================================================================== =====

       HTML5 display definitions

       ===================================================================== ===== */

     

    /**

    * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.

    */

     

    article,

    aside,

    details,

    figcaption,

    figure,

    footer,

    header,

    hgroup,

    main,

    nav,

    section,

    summary {

        display: block;

    }

     

    /**

    * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.

    */

     

    audio,

    canvas,

    video {

        display: inline-block;

        *display: inline;

        *zoom: 1;

    }

     

    /**

    * Prevent modern browsers from displaying `audio` without controls.

    * Remove excess height in iOS 5 devices.

    */

     

    audio:not([controls]) {

        display: none;

        height: 0;

    }

     

    /**

    * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.

    * Known issue: no IE 6 support.

    */

     

    [hidden] {

        display: none;

    }

     

    /* ===================================================================== =====

       Base

       ===================================================================== ===== */

     

    /**

    * 1. Prevent system color scheme's background color being used in Firefox, IE,

    *    and Opera.

    * 2. Prevent system color scheme's text color being used in Firefox, IE, and

    *    Opera.

    * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using

    *    `em` units.

    * 4. Prevent iOS text size adjust after orientation change, without disabling

    *    user zoom.

    */

     

    html {

        background: #fff; /* 1 */

        color: #000; /* 2 */

        font-size: 100%; /* 3 */

        -webkit-text-size-adjust: 100%; /* 4 */

        -ms-text-size-adjust: 100%; /* 4 */

    }

     

    /**

    * Address `font-family` inconsistency between `textarea` and other form

    * elements.

    */

     

    html,

    button,

    input,

    select,

    textarea {

        font-family: sans-serif;

    }

     

    /**

    * Address margins handled incorrectly in IE 6/7.

    */

     

    body {

        margin: 0;

    }

     

    /* ===================================================================== =====

       Links

       ===================================================================== ===== */

     

    /**

    * Address `outline` inconsistency between Chrome and other browsers.

    */

     

    a:focus {

        outline: thin dotted;

    }

     

    /**

    * Improve readability when focused and also mouse hovered in all browsers.

    */

     

    a:active,

    a:hover {

        outline: 0;

    }

     

    /* ===================================================================== =====

       Typography

       ===================================================================== ===== */

     

    /**

    * Address font sizes and margins set differently in IE 6/7.

    * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,

    * and Chrome.

    */

     

    h1 {

        font-size: 2em;

        margin: 0.67em 0;

    }

     

    h2 {

        font-size: 1.5em;

        margin: 0.83em 0;

    }

     

    h3 {

        font-size: 1.17em;

        margin: 1em 0;

    }

     

    h4 {

        font-size: 1em;

        margin: 1.33em 0;

    }

     

    h5 {

        font-size: 0.83em;

        margin: 1.67em 0;

    }

     

    h6 {

        font-size: 0.67em;

        margin: 2.33em 0;

    }

     

    /**

    * Address styling not present in IE 7/8/9, Safari 5, and Chrome.

    */

     

    abbr[title] {

        border-bottom: 1px dotted;

    }

     

    /**

    * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.

    */

     

    b,

    strong {

        font-weight: bold;

    }

     

    blockquote {

        margin: 1em 40px;

    }

     

    /**

    * Address styling not present in Safari 5 and Chrome.

    */

     

    dfn {

        font-style: italic;

    }

     

    /**

    * Address differences between Firefox and other browsers.

    * Known issue: no IE 6/7 normalization.

    */

     

    hr {

        -moz-box-sizing: content-box;

        box-sizing: content-box;

        height: 0;

    }

     

    /**

    * Address styling not present in IE 6/7/8/9.

    */

     

    mark {

        background: #ff0;

        color: #000;

    }

     

    /**

    * Address margins set differently in IE 6/7.

    */

     

    p,

    pre {

        margin: 1em 0;

    }

     

    /**

    * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.

    */

     

    code,

    kbd,

    pre,

    samp {

        font-family: monospace, serif;

        _font-family: 'courier new', monospace;

        font-size: 1em;

    }

     

    /**

    * Improve readability of pre-formatted text in all browsers.

    */

     

    pre {

        white-space: pre;

        white-space: pre-wrap;

        word-wrap: break-word;

    }

     

    /**

    * Address CSS quotes not supported in IE 6/7.

    */

     

    q {

        quotes: none;

    }

     

    /**

    * Address `quotes` property not supported in Safari 4.

    */

     

    q:before,

    q:after {

        content: '';

        content: none;

    }

     

    /**

    * Address inconsistent and variable font size in all browsers.

    */

     

    small {

        font-size: 80%;

    }

     

    /**

    * Prevent `sub` and `sup` affecting `line-height` in all browsers.

    */

     

    sub,

    sup {

        font-size: 75%;

        line-height: 0;

        position: relative;

        vertical-align: baseline;

    }

     

    sup {

        top: -0.5em;

    }

     

    sub {

        bottom: -0.25em;

    }

     

    /* ===================================================================== =====

       Lists

       ===================================================================== ===== */

     

    /**

    * Address margins set differently in IE 6/7.

    */

     

    dl,

    menu,

    ol,

    ul {

        margin: 1em 0;

    }

     

    dd {

        margin: 0 0 0 40px;

    }

     

    /**

    * Address paddings set differently in IE 6/7.

    */

     

    menu,

    ol,

    ul {

        padding: 0 0 0 40px;

    }

     

    /**

    * Correct list images handled incorrectly in IE 7.

    */

     

    nav ul,

    nav ol {

        list-style: none;

        list-style-image: none;

    }

     

    /* ===================================================================== =====

       Embedded content

       ===================================================================== ===== */

     

    /**

    * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.

    * 2. Improve image quality when scaled in IE 7.

    */

     

    img {

        border: 0; /* 1 */

        -ms-interpolation-mode: bicubic; /* 2 */

    }

     

    /**

    * Correct overflow displayed oddly in IE 9.

    */

     

    svg:not(:root) {

        overflow: hidden;

    }

     

    /* ===================================================================== =====

       Figures

       ===================================================================== ===== */

     

    /**

    * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.

    */

     

    figure {

        margin: 0;

    }

     

    /* ===================================================================== =====

       Forms

       ===================================================================== ===== */

     

    /**

    * Correct margin displayed oddly in IE 6/7.

    */

     

    form {

        margin: 0;

    }

     

    /**

    * Define consistent border, margin, and padding.

    */

     

    fieldset {

        border: 1px solid #c0c0c0;

        margin: 0 2px;

        padding: 0.35em 0.625em 0.75em;

    }

     

    /**

    * 1. Correct color not being inherited in IE 6/7/8/9.

    * 2. Correct text not wrapping in Firefox 3.

    * 3. Correct alignment displayed oddly in IE 6/7.

    */

     

    legend {

        border: 0; /* 1 */

        padding: 0;

        white-space: normal; /* 2 */

        *margin-left: -7px; /* 3 */

    }

     

    /**

    * 1. Correct font size not being inherited in all browsers.

    * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,

    *    and Chrome.

    * 3. Improve appearance and consistency in all browsers.

    */

     

    button,

    input,

    select,

    textarea {

        font-size: 100%; /* 1 */

        margin: 0; /* 2 */

        vertical-align: baseline; /* 3 */

        *vertical-align: middle; /* 3 */

    }

     

    /**

    * Address Firefox 3+ setting `line-height` on `input` using `!important` in

    * the UA stylesheet.

    */

     

    button,

    input {

        line-height: normal;

    }

     

    /**

    * Address inconsistent `text-transform` inheritance for `button` and `select`.

    * All other form control elements do not inherit `text-transform` values.

    * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.

    * Correct `select` style inheritance in Firefox 4+ and Opera.

    */

     

    button,

    select {

        text-transform: none;

    }

     

    /**

    * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`

    *    and `video` controls.

    * 2. Correct inability to style clickable `input` types in iOS.

    * 3. Improve usability and consistency of cursor style between image-type

    *    `input` and others.

    * 4. Remove inner spacing in IE 7 without affecting normal text inputs.

    *    Known issue: inner spacing remains in IE 6.

    */

     

    button,

    html input[type="button"], /* 1 */

    input[type="reset"],

    input[type="submit"] {

        -webkit-appearance: button; /* 2 */

        cursor: pointer; /* 3 */

        *overflow: visible;  /* 4 */

    }

     

    /**

    * Re-set default cursor for disabled elements.

    */

     

    button[disabled],

    html input[disabled] {

        cursor: default;

    }

     

    /**

    * 1. Address box sizing set to content-box in IE 8/9.

    * 2. Remove excess padding in IE 8/9.

    * 3. Remove excess padding in IE 7.

    *    Known issue: excess padding remains in IE 6.

    */

     

    input[type="checkbox"],

    input[type="radio"] {

        box-sizing: border-box; /* 1 */

        padding: 0; /* 2 */

        *height: 13px; /* 3 */

        *width: 13px; /* 3 */

    }

     

    /**

    * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.

    * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome

    *    (include `-moz` to future-proof).

    */

     

    input[type="search"] {

        -webkit-appearance: textfield; /* 1 */

        -moz-box-sizing: content-box;

        -webkit-box-sizing: content-box; /* 2 */

        box-sizing: content-box;

    }

     

    /**

    * Remove inner padding and search cancel button in Safari 5 and Chrome

    * on OS X.

    */

     

    input[type="search"]::-webkit-search-cancel-button,

    input[type="search"]::-webkit-search-decoration {

        -webkit-appearance: none;

    }

     

    /**

    * Remove inner padding and border in Firefox 3+.

    */

     

    button::-moz-focus-inner,

    input::-moz-focus-inner {

        border: 0;

        padding: 0;

    }

     

    /**

    * 1. Remove default vertical scrollbar in IE 6/7/8/9.

    * 2. Improve readability and alignment in all browsers.

    */

     

    textarea {

        overflow: auto; /* 1 */

        vertical-align: top; /* 2 */

    }

     

    /* ===================================================================== =====

       Tables

       ===================================================================== ===== */

     

    /**

    * Remove most spacing between table cells.

    */

     

    table {

        border-collapse: collapse;

        border-spacing: 0;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    May 5, 2013 4:16 AM   in reply to inquestflash

    I repeat what I said before, but in a different format specially reserved for special persons.

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Untitled Document</title>

    <style>

    * {

        padding: 0;

        margin: 0;

    }

    #box1 {

        background-color: #00F;

        height: 200px;

        width: 600px;

        padding: 0px;

        margin: 0 auto;

        color: white;

    }

    </style>

    </head>

     

    <body>

        <div id="box1">Content for ID "box1" goes here</div>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    May 5, 2013 10:36 AM   in reply to inquestflash

    Ben gave you the wildcard selector * to zero out margins and padding on everything.  It's a bit like using a sledghammer to swat flies, though.

     

    Gaps are mostly caused by default browser margins & padding on text in headings, lists, and paragraphs.   You can zero out the CSS margins & padding on select elements yourself. 

     

    h1, h2, h3, h4, h5, p {margin:0; padding:0}

     

    Or use a CSS reset method.

    http://cssresetr.com/

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 5, 2013 10:42 AM   in reply to Nancy O.

    Hi Nancy, if you have a look at my first reply, you will see that I recommended a CSS reset as well as having given the sledgehammer.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points