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

我已在Chrome和Firefox中测试过。我希望容器中的块填充空间，但是你可以看到有一个空白区域。我无法弄清楚为什么会这样。我已经能够操纵它，但我宁愿学习纠正这种方法的最佳实践方法，而不是我的ADHOC方法。

Answer 1

空白有两个原因：

1）内部DIV有余量。

2）inline-block元素由HTML中的物理空格分隔。

Answer 2

CSS显示inline-block collapses whitespace between elements into 1 spaces - 与2个文字之间相同。

1选项是在html中注释掉div之间的所有空格 - http://jsfiddle.net/Aprillion/H4BqF/

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

另一个选项是编辑CSS以显示块并向左浮动 - http://jsfiddle.net/Aprillion/H4BqF/1/

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

在这两种情况下，内部div都没有任何边距。

Answer 3

你必须从你的CSS中删除保证金。

间谍好奇心

HTML：

CSS：

3 个答案: