alineación vertical de columnas de bloqueo inline

Cuando se usa la pantalla en línea para crear columnas, se hace evidente que cuando el contenido se agrega a la primera columna, las columnas posteriores descenden verticalmente. Esto se puede resolver utilizando la propiedad CSS vertical-Align.

para evitar este problema, agregue vertical-align: top; a la declaración de CSS del contenedor. Esto asegura que todas las columnas se alineen verticalmente en la parte superior, independientemente del contenido dentro de cada columna.

.cont span {
    display: inline-block;
    vertical-align: top;
    height:100%;
    line-height: 100%;
    width: 33.33%;
    outline: 1px dashed red; /* Just for Demo */
}

enfoques alternativos

Aunque en línea bloqueo se puede usar para crear columnas, puede no ser la solución óptima debido a posibles problemas de espacio en blanco entre columnas. Considere el uso de Flex Box o CSS Grid, ya que proporcionan más control sobre el diseño y la alineación de la columna.