CODEWITHSUNDEEP
htmlcss
Simon
Simon

Reputation: 394

HTML CSS strange gaps between divs

Please see the below code and screenshot. Can anyone please explain why there are white gaps between the divs and how to remove them? I would like the divs sit next to one another without any margin between them

![
<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            color: #b3b3b3;
            font-family: arial;
            font-size: 14pt;
        }

        #containerdiv {
            width: 1184px;
            height: 626px;
            position: absolute;
            margin-top: -338px;
            margin-left: -552px;
            top: 50%;
            left: 50%;
        }

        #centerdiv {
            display: inline-block;
            width: 1024px;
            height: 576px;
            background-color: #fff;
        }

        #lowercenterdiv {
            background-color: #ff00ff;
            width: 1024px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            display: inline-block;
        }

        #lowerleftdiv {
            background-color: #00ff00;
            width: 80px;
            height: 50px;
            line-height: 50px;
            position: absolute;
        }

        #leftdiv {
            position: absolute;
            background-color: #ff000f;
            width: 80px;
            height: 576px;
            display: inline-block;
            line-height: 576px;
        }

        #rightdiv {
            position: absolute;
            background-color: #000fff;
            width: 80px;
            height: 576px;
            display: inline-block;
            line-height: 576px;
            text-align: right;
        }

        #lowerrightdiv {
            position: absolute;
            background-color: #fff000;
            width: 80px;
            height: 50px;
            text-align: right;
            display: inline-block;
            line-height: 50px;
        }

        .arrowimg img {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div id="containerdiv">
        <div id="leftdiv"><img class="arrowimg" src="leftarrow.png"></div>
        <div id="centerdiv">

        </div>
        <div id="rightdiv"><img class="arrowimg" src="rightarrow.png"></div>
        <div id="lowerleftdiv">?</div>
        <div id="lowercenterdiv">?</div>
        <div id="lowerrightdiv">?</div>
    </div>
</body>

</html>

enter image description here

Upvotes: 0

Views: 1623

Answers (4)

Sarthak Raval
Sarthak Raval

Reputation: 1291

Hope its fix

{
    margin: 0;
    padding: 0;
    border-sizing: border-box;
}

Upvotes: 0

wvdz
wvdz

Reputation: 16651

This is a weird thing in how html is interpreted. The whitespace between the divs is rendered as a space. There are many ways to solve this, and none of them are very pretty.

One way is like this:

<div id="leftdiv">
    <img class="arrowimg" src="leftarrow.png">
</div>
<div id="centerdiv">
</div>
<div id="rightdiv">
    <img class="arrowimg" src="rightarrow.png">
</div>
<div id="lowerleftdiv">
    ?
</div>
<div id="lowercenterdiv">
    ?
</div>
<div id="lowerrightdiv">
    ?
</div>

Upvotes: 0

somethinghere
somethinghere

Reputation: 17358

You could try to remove all your position: absolutes, as they make things complicated. What you want is: three boxes next to each other, then three boxes next to each other below it. If you float them to the left, you solve this problem. I have amended your CSS, just copy and paste and you can see the gaps disappear because floating elements don't care about whitespaces. There are other difficulties involved with floating, but it does solve your problem.

I have also removed everything I didn't need to get my point across.

#containerdiv {
    width: 1184px;
    height: 626px;
    position: absolute;
    margin-top:-338px;
    margin-left:-552px;
    top:50%;
    left:50%;
}

// I added this to float all the divs inside your container to float
#containerdiv div {
    float: left;
}

#centerdiv {
    // I removed position: absolute from every box, as well as line-heights, align and display
    width: 1024px;
    height: 576px;
    background-color: #fff;
}

#lowercenterdiv {
    background-color: #ff00ff;
    width: 1024px;
    height: 50px;
    text-align:center;
} 

#lowerleftdiv {
    background-color: #00ff00;
    width: 80px;
    height: 50px;
} 

#leftdiv {
    background-color: #ff000f;
    width: 80px;
    height: 576px;
} 

#rightdiv {
    background-color: #000fff;
    width: 80px;
    height: 576px;
} 

#lowerrightdiv {
    background-color: #fff000;
    width: 80px;
    height: 50px;
}

Upvotes: 3

Ignas Damunskis
Ignas Damunskis

Reputation: 1514

Add this to your css:

* {
    margin: 0;
    padding: 0;
}

Upvotes: 0

Related Questions