在不添加任何样式的情况下，以下的html代码呈现如下：
1
2
3
4
5
6
7
8
9
上面是在谷歌浏览器中的默认样式。可以发现默认带有padding和border。
我们可以添加以下代码来消除默认样式：
*{
margin:0;
padding:0;
font-size: 100%;
}
现在，的默认padding被消除了，但是可以看到按钮之间还是有默认的间隔，这是inline-block元素默认的间距，可以使用float来消除：
.square{float: left;
width: 30px;
height: 30px;
}
可以看到按钮的默认间距已经消失，但是所有按钮浮动为一行，所以要清除浮动：
.square-row:after{
content:"";
display: block;
clear: both;
}
但是现在还有问题，边框重叠导致边框宽度不一致，而且可以自己定义边框：
.square{float: left;
width: 30px;
height: 30px;
border: 1px solid black;//自定义边框
margin-right: -1px; //用来消除左右重叠边框
margin-bottom: -1px; //用来消除上下重叠边框
}
现在还剩最后一个问题，按钮按下会出现选中框，如果要消除可以添加如下：
.square{float: left;
width: 30px;
height: 30px;
border: 1px solid black;
margin-right: -1px;
margin-bottom: -1px;
outline: none;//消除默认点击蓝色边框效果
}
