[Duda] Diferencias entre el display inline block del primer curso y este

He visto una diferencia entre el primer curso de html y css y de esta parte 4, en específico en la sección diferenciales del index.html y es que cuando declaras display inline block al ul de las listas en la parte 1 si se hace el bloque en línea, aquí esta la clase donde se hace esto: https://app.aluracursos.com/course/html5-css3-primera-pagina-web/task/73277, pero pasa que acá en esta parte de esta clase: https://app.aluracursos.com/course/html5-css3-avanzando-css/task/74081, cuando hace el mismo procedimiento no se hace el bloque en línea solo que porque hay un espacio en línea y se tiene que juntar la etiqueta de img justo en la misma línea que cierra la etiqueta ul y ya se hace el bloque en línea, cosa que en el primer curso no se hacía esto de juntar la etiqueta de cierre de ul e img en una mísma línea, incluso dejando el espacio entre el cierre de ul y la img y si daba el bloque en línea, por qué pasa esto?

Aquí los códigos en sus respectivas clases del cada curso parte 1 de html y css HTML

            <ul>
                <li class="items">Atención personalizada a los clientes</li>
                <li class="items">Espacio diferenciado</li>
                <li class="items">Localización</li>
                <li class="items">Profesionales calificados</li>
            </ul>

            <img src="diferenciales/diferenciales.jpg" class="imagenDiferenciales">

CSS

ul{
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}

.imagenDiferenciales{
    width: 50%;
}

parte 4 de html y css HTML

            <ul class="listas-diferenciales">
                <li class="items">Atención personalizada a los clientes</li>
                <li class="items">Espacio diferenciado</li>
                <li class="items">Localización</li>
                <li class="items">Profesionales calificados</li>
                <li class="items">Puntualidad</li>
                <li class="items">Limpieza</li>
            </ul><img src="diferenciales/diferenciales.jpg" class="imagen-diferenciales">

CSS

.listas-diferenciales{
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.imagen-diferenciales{
    width: 60%;
}