CODEWITHSUNDEEP
htmlcssspacing
DevKev
DevKev

Reputation: 43

Spacing curiousity

So, I just working with HTML/CSS a bit and I hit a bit of a spacing dilemma. Here is my code.

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<title>Tic Tac Toe Demo</title> 
<link rel='stylesheet' type='text/css' href='styles/styles.css'>
</head> 
<body>
<div id='container'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div> 
</body> 
</html>

CSS:

body{
    background-color: grey;
    height: 1080px;
    width: 50%;
    margin: 0 auto;
}

#container{
    height: 100%;
    width: 100%;
    background-color: white;
}

div div{
    display: inline-block;
    background-color: grey;
    height: 25%;
    width: 25%;
    margin: 5px;
}

I have tested in Chrome and Firefox. I want the blocks in the container to fill the space however you can see that there is a white space. And I cannot figure out why this is. I have been able to manipulate it but I would rather learn the best practices way of correcting this instead of my ADHOC approach.

Upvotes: 0

Views: 77

Answers (3)

Aprillion
Aprillion

Reputation: 22304

CSS display inline-block collapses whitespace between elements into 1 spaces - same as between 2 words of text.

1 option is to comment out all whitespace between divs in html - http://jsfiddle.net/Aprillion/H4BqF/

<div id='container'><!--
    --><div></div><!--
    --><div></div><!--
    ...

another option is to edit your CSS to display block and float left - http://jsfiddle.net/Aprillion/H4BqF/1/

div div{
    display: block;
    float: left;
    ...

in both cases, you cannot have any margin around the inner divs.

Upvotes: 1

Bilal ismail
Bilal ismail

Reputation: 11

You have to remove margin from your css.

Upvotes: -1

Jim Cote
Jim Cote

Reputation: 1756

There are two reasons for the whitespace:

1) The inner DIVs have a margin.

2) inline-block elements are separated by the physical spaces in the HTML.

Upvotes: 4

Related Questions