Construa um quadrado para os capítulos do livro digital

Preparei duas opções para quem quer estilizar o capítulo do seu livro digital em ePUB e também foi testado em AZW3 para Kindle.

Há duas maneiras, utilizando tabelas:

CSS:

.block_12 {
  display: block;
  font-family: "Adobe Caslon Pro", serif;
  font-size: 1.375em;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  margin: 0;
  padding: 0;
}

.cl2 {
  display: table-row-group;
  vertical-align: middle;
}
.cl3 {
  display: table-row;
  vertical-align: inherit;
}

.table_ {
  border-collapse: collapse;
  border-spacing: 2px;
  display: table;
  margin-bottom: 0;
  margin-left: 208pt;
  margin-top: 0;
  text-indent: 0;
  border: black solid 1pt;
}

.td_ {
  display: table-cell;
  text-align: inherit;
  vertical-align: top;
  width: 33.8pt;
  border: black solid 3pt;
  padding: 0.5ex 5.4pt;
}

HTML:

<table class="table_">
<tbody class="cl2"><tr class="cl3">
<td class="td_"><p class="block_12">2</p>
</td>
</tr>
</tbody>
</table>

e com o recurso DIV:

CSS:

.cl4 {
  background-color: white;
  color: black;
  display: block;
  height: 30px;
  text-align: center;
  width: 30px;
  border: black solid 3pt;
  margin: 150px 0 0 200px;
  padding: 20px;
}

HTML:

<div class="cl4">55</div>