CSS3 “Recuento de columnas” no se alinea en la parte superior de las columnas (WordPress, receptivo)

En primer lugar, encontré esa pregunta aquí, pero la respuesta no encaja en mi caso, por lo que hago una pregunta que puede parecer similar pero no lo es. Si eso tiene sentido de alguna manera 😀

Estoy creando un tema secundario para el tema “responsivo” de WordPress de cyberchimps.

Para eso necesitaba texto para dar forma en 3 columnas, pero también para ser editable en el backend del sitio. Lo logré con CCS:

.col-940{
    clear: none;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -webkit-column-gap: 40px;
    -moz-column-count: 3; /* Firefox */
    -moz-column-gap: 40px; 
    column-count: 3;
    column-gap: 40px;
}

p {
    margin: 5px 0px 0px 0px;
}

Eso ahora genera el problema, que la primera columna empieza 5px más abajo que las siguientes. No puedo entender por qué.

Como se dijo anteriormente, la respuesta en el otro hilo no funcionará, porque también tengo subsitios que solo usan 2 columnas, por lo que no puedo usar un ancho definido. Arriba/antes del div en el que se encuentra el texto, siempre hay otro div.

(PHP) contenedor en el que se encuentra el texto:

<?php if( have_posts() ) : ?>

    <?php while( have_posts() ) : the_post(); ?>

        <?php responsive_entry_before(); ?>
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <?php responsive_entry_top(); ?>

            <div class="post-entry">
                <?php the_content( __( 'Read more &#8250;', 'responsive' ) ); ?>
                <?php wp_link_pages( array( 'before' => '<div class="pagination">' . __( 'Pages:', 'responsive' ), 'after' => '</div>' ) ); ?>
            </div>
            <!-- end of .post-entry -->

            <?php responsive_entry_bottom(); ?>
        </div><!-- end of #post-<?php the_ID(); ?> -->

    <?php
    endwhile;

    get_template_part( 'loop-nav' );

else :

    get_template_part( 'loop-no-posts' );

endif;
?>

(HTML) contenedor producido por PHP:

<div id="post-25" class="post-25 page type-page status-publish hentry">
    <!--
        <h1 class="entry-title post-title">Kontakt</h1>…
    -->
    <div class="post-entry">
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing …
        </p>
    </div>
    <!-- end of .post-entry -->
</div>
<!--end of #post-25 -->

Pantallas:

Toma de la situación

Disparo con marcado problema

Ha aplicado un margen superior de 5px y el único lugar que aparece en la parte superior de una columna es al comienzo de la primera. Debe eliminar este margen superior, tal vez con

    .post-entry > p:first-child {
      margin: 0;
    }

Para mí, necesitaba que cada elemento de la columna tuviera una altura fija. También tenía problemas con la alineación vertical. Pude corregir la alineación vertical haciendo que la altura de la línea en el elemento sea la altura deseada del elemento y envolviendo el contenido del elemento dentro de un div.

ul {
    column-count: 2;
}
ul > li {
    line-height: 30px;
}
ul > li > div {
    height: 30px;
    line-height: 1.2;
}