How do I remove gaps from my division in html?

Question

The question must seem pretty basic and is ...

How do I remove these gaps as shown in image??

http://postimg.org/image/qigf1nfen/ (Not a very professional img I agree)

I want that the gaps should vanish , like if I want to create a header like in facebook its across the whole page , from left to right , any suggestions?

Code:

index.html:

<!DOCTYPE=html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="main.css">
        <body>
            <div class="row">
               <div class="col4">
                    <h1>Lorem Ipsum</h1>
                </div>
            </div>
        </body>
    </html>

main.css:

* {
   outline: 1px solid red !important;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.row{
    width:100%;
    display: flex;
    flex-wrap:wrap;
}
.col1{
    width: 8.33%;
}
.col2{
    width: 16.66%;
}
.col3{
    width: 25%;
}
.col4{
    width: 33.33%;
}
.col5{
    width: 41.66%;
}
.col6{
    width: 50%;
}
.col7{
    width: 58.33%;
}
.col8{
    width: 66.66%;
}
.col9{
    width: 75%;
}
.col10{
    width: 83.33%;
}
.col11{
    width: 91.66%;
}
.col12{
    width: 100%;
}

Did you use normalize.css? :) https://necolas.github.io/normalize.css/ — Thomas Bormans, Nov 11 '14 at 18:32
Those are the margins of (probably) HTML and Body. You should read about them on Mozilla Developer Network or similar site that covers CSS; they're a very common property in web development. — TylerH, Nov 11 '14 at 18:38

score 3 · Accepted Answer · answered Nov 11 '14 at 18:38

3

You need to remove the margin from the body and html element. Better is to use normalize as a starting point (as suggested by @ThomasBormans in the comments)

body, html { margin: 0; padding: 0; }

answered Nov 11 '14 at 18:38

giorgio

10,111
2
28
41

Thnx ur method works !! Bt of I apply margin:0 to just my div why doesnt it work? – Rohan Kumar Nov 12 '14 at 07:53
because the `` and `` tags both aren't `
` tags ;) A div is just another html element, like an ``, `
`, `` etc.
– giorgio Nov 12 '14 at 13:39
In addition: the gaps you were seeing was becuase the html and body tags have a margin and padding (the size of it, and it's existence as well, depending on the browser). So the div itself, where you have your header, had nothing to do with it. – giorgio Nov 12 '14 at 13:41

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

#div1 div {
width:30px;height:30px;
border:blue 1px solid;
display:inline-block;
*display:inline;zoom:1;
margin:0px;outline:none;
vertical-align: top;
}

Also Remove "whitespace" between div element

edited May 23 '17 at 11:49

Community

1
1

answered Nov 11 '14 at 18:35

Rushabh Shah

405
1
6
16

score 0 · Answer 3 · answered Nov 11 '14 at 18:48

0

You could remove all margins and borders from all elements initially

 * { margin: 0; padding: 0; }

May you use a reset.css to minimize browser differences.

answered Nov 11 '14 at 18:48

pbaldauf

1,671
2
23
32

Thnx ur method works !! Bt of I apply margin:0 to just my div why doesnt it work? – Rohan Kumar Nov 12 '14 at 07:54
That's a good question. Inspect your div with *Developer Tools* and see which styles are applied, that affect your `div`. Perhaps `margin: 0 !important` on your *div* overrides the "wrong" style – pbaldauf Nov 12 '14 at 10:31

How do I remove gaps from my division in html?

3 Answers3