CODEWITHSUNDEEP
htmlcss
Rohan Kumar
Rohan Kumar

Reputation: 3

How do I remove gaps from my division in html?

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%;
}

Upvotes: 0

Views: 87

Answers (3)

pbaldauf
pbaldauf

Reputation: 1681

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.

Upvotes: 0

giorgio
giorgio

Reputation: 10202

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; }

Upvotes: 3

Rushabh Shah
Rushabh Shah

Reputation: 445

#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

Upvotes: 0

Related Questions