0

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.

MightyPork
  • 18,270
  • 10
  • 79
  • 133
DevKev
  • 43
  • 6
  • I removed the margins however the white space that I was referring to was the large gap on the left and the bottom. I understand that we using % everything has to add up to 100% or else it will move the next block tot he next row. However with the block adding up to 90% there is more than 10% gap all the bottom and left of the container and the divs. – DevKev Jul 11 '14 at 23:30

3 Answers3

4

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.

Jim Cote
  • 1,746
  • 3
  • 15
  • 26
1

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.

Community
  • 1
  • 1
Aprillion
  • 21,510
  • 5
  • 55
  • 89
-1

You have to remove margin from your css.

Bilal ismail
  • 11
  • 2