尝试仅使用 css3 构建国际象棋图，但似乎我的结果远非正确(目前，只有一行 4 个单元格):
- 单元格的边距似乎不同于 0
- 单元格不是正方形，尽管我使用了 box-sizing css 属性
我误会了什么？
我的 html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.chess_board {
display: block;
}
.chess_cell {
display: inline;
font-family: serif;
font-size: 2.3em;
width: 0.8em;
height: 0.8em;
margin: 0;
box-sizing: border-box;
}
.white_cell {
background-color: rgb(217, 245, 2);
}
.black_cell {
background-color: rgb(89, 34, 21);
}
.white_piece {
color: rgb(179, 48, 63);
}
</style>
</head>
<body>
My chess board
<div class="chess_board">
<div class="chess_cell black_cell">♚</div>
<div class="chess_cell white_cell white_piece">♕</div>
<div class="chess_cell white_cell">♚</div>
<div class="chess_cell black_cell white_piece">♕</div>
</div>
My another chess board ... to be drawn !
</body>
</html>
最佳答案
首先，您应该知道的一件事是，当您的元素带有 display: inline 时，width 和 height 属性都不起作用。要使元素对齐，但仍保持其大小，请改用 display: inline-block。
其次，“边距”根本不是边距，而是由方 block 之间的空间引起的。要解决此问题，您可以在您的 html 中没有空格，如下所示:
<div>
... content
</div><div>
... content
</div>
或者您可以在方 block 上放置一个float: left。
关于css - 用CSS构建国际象棋图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30879917/