@Zeromm: intenté lo del
font-size: 0; pero no causa efecto ya que no tengo texto dentro del contenedor.
@pzin: definitivamente era el
outline.
Gracias a ambos por sus valiosas sugerencias. Ya solucioné el problema, y lo voy a explicar por si acaso alguien más desea hacer lo mismo que yo:
Código HTML:
<section class="cont_recuadros">
<section class="recuadros" id="cuadro1"></section>
<section class="recuadros" id="cuadro2"></section>
<section class="recuadros" id="cuadro3"></section>
<section class="recuadros" id="cuadro4"></section>
<section class="recuadros" id="cuadro5"></section>
<section class="recuadros" id="cuadro6"></section>
<section class="recuadros" id="cuadro7"></section>
<section class="recuadros" id="cuadro8"></section>
<section class="recuadros" id="cuadro9"></section>
</section>
Código:
.cont_recuadros {
width: 75%;
height: 100%;
margin-left: 25%;
}
.recuadros {
width: 33.3%;
height: 31.7%;
background: transparent;
outline: dotted;
outline-width: 1px;
float: left;
}
La
ID de los cuadritos no la coloco porque aun no le he dado color a cada uno, pero bien se sabe que cada cuadro se puede moficiar por separado mediante su id unica.
Resultado final:
