[SOLUCIONADO] Corrección de galería con Float

[LucasAddams]

Básicamente, chicos. Quiero preguntar como acomodar el css para eliminar este espacio entre los cuadros y los cuadros dentro con float.

Verán, graficamente, me está pasando esto:


y quiero lograr esto:


En cuanto al código, está así:

Código HTML:

<div id="campo-de-cuadros">
        <div id="cuadro"></div>
        <div id="cuadro"></div>
        <div id="cuadro"></div>
        <div id="cuadro"></div>
</div> 

Código:

.campo-de-cuadros{
	width: 80%; /*del contenedor*/
	height: 1312px !important;
	margin: 0 auto;
	overflow-y: auto; }

.cuadro{
        width: 219px;
	height: 219px;
	float: left !important;}

No lo estaría pudiendo resolver, che. Gracias!

[LucasAddams]

PARA FUTUROS TEMAS CON ESTE MISMO PROBLEMA:

Lo mejor es hacer así (dejo el código de solución hallado después de una siesta):

Código HTML:

<div id="campo-de-cuadros">
        <div id="cuadro"></div>
        <div id="cuadro"></div>
        <div id="cuadro"></div>
        <div id="cuadro"></div>
</div> 

Código:

#campo-de-cuadros{
	background: none;
	width: 81.2%;
	height: 1000px; /*El alto del div, si queres, para el scroll*/
	margin: 0 auto;
	overflow-y: auto;
}

.cuadro{
	width: 25%; /*Hacer en porcentaje si el campo está en porcentaje*/
	height: auto;
	float: left;
}

De esta manera, utilizando tanto el cuadro como el campo de cuadros en porcentajes, se logra que se queden alineados de manera correcta.

IMPORTANTE: Si el cuadro contiene una imagen <img src="la imagen"> les va a quedar un pequeño espacio abajo del float y para eliminarlo, hay que poner un display block, de manera que el código quedaría así:

Código HTML:

<div id="campo-de-cuadros">
        <div id="cuadro"></div>
        <div id="cuadro"></div>
        <div id="cuadro"></div>
        <div id="cuadro"></div>
</div> 

Código:

#campo-de-cuadros{
	background: none;
	width: 81.2%;
	height: 1000px; /*El alto del div, si queres, para el scroll*/
	margin: 0 auto;
	overflow-y: auto;
}

.cuadro{
	width: 25%; /*Hacer en porcentaje si el campo está en porcentaje*/
	height: auto;
	float: left;
}

.cuadro img{
	width: 100%;
	height: 100%;
	display: block; /*para ocultar el espacio*/
}