[SOLUCIONADO] Quitar espacio en <section> alineados

[Luminis]

Hola comunidad, hoy tengo una pequeña duda que he solucionado otras veces pero que no recuerdo cómo lo había hecho antes. Es una laguna mental.

Debo posicionar algunos <section> horizontalmente, pero mi problema es que estos al ser alineados me dejan un espacio en blanco entre ellos, exactamente así:



La idea es que los <section> NO dejen el espacio en blanco, así:



Para posicionarlos horizontalmente usé display: inline-block; y me generaba el resultado de la primera imagen, pero luego les puse un vertical-align: top; y ya el espacio en blanco horizontal desaparecía, lo malo es que aun queda el espacio a los lados de los reuadros. Otra cosa que hice fue cambiarle el tamaño a los recuadros, pero aun seguía manteniendose el espacio entre los recuadros, y si los agrandaba mas uno de los recuadros saltaba para la linea inferior, o sea, no me sirve.

Voy a dejar el Html de esa sección:

HTML:

Código:

    	<section id="seccion1">
                <section class="cont_recuadros">
                   <section id="cuadro"></section>
                   <section id="cuadro"></section>
                   <section id="cuadro"></section>
                   <section id="cuadro"></section>
                   <section id="cuadro"></section>
                   <section id="cuadro"></section>
                </section>
    	</section>

CSS:

Código:

.cont_recuadros {
	width: 75%;
	height: 100%;
	margin-left: 25%;
}

#cuadro {
	width: 32%;
	height: 32%;
	background: red;
	display: inline-block;
	/*vertical-align: top;*/
	text-align: center;
	border:dashed;
	border-width: 1px;
}

La intención es colocar una serie de imagenes exactamente como se ven en esta pagina: http://cosasquenosabias.com/index.php

Aparte de la duda anterior, tengo otra pequeña duda que no recuerdo donde la habré leído:

Tengo entendido que hay un tipo de borde que trabaja SOBRE el elemento y no a los lados (como el border que conocemos), de esta manera no afecta las medidas del elemento. ¿Como se llama ese tipo de borde? Me gustaria usarlo para maquetar, lo leí hace tiempo, pero no recuerdo donde

De antemano muchas gracias a quienes me puedan ayudar saludos!

[Zeromm]

al .cont_recuadros ponle un font-size: 0;

y la segunda duda... creo que te refieres a Box-sizing: Border-box, que lo que te hace es no contabilizar las dimensiones del padding en el elemento.

[pzin]

Lo del borde tal vez sea outline. Aunque como dice Zeromm mejor cambiar el modelo de caja de CSS con box-sizing.

[Luminis]

@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:

[Zeromm]

El font size: 0 no es para darle formato a los textos (en este caso), es para eliminar los espacios que se generan con "inline-block:

Aquí tienes un ejemplo.

Ves que hay espacios entre los elementos, pues si le añades a ".cont_recuadros" un font-size de 0, verás que esos espacios desaparecen.