Me gustaría cerrar un elemento de mensaje <div> con una transición que reduzca suavemente el espacio vertical ocupado del elemento a cero. Una vez finalizada la transición, el elemento se eliminará del documento. No debería haber ningún salto adicional del documento después de esto. JavaScript inicia todo el proceso de cierre desde un controlador de eventos de clic.

El elemento del mensaje ya tiene una transición para transform: scaleY(0) por lo que colapsa visualmente. Implementé la liberación de espacio con una transición al margin-bottom: -...px donde el valor se calcula por la altura real del elemento. (Ignoro los cambios de altura mientras se ejecuta la transición, esto no debería ocurrir en la práctica).

Con esto, el margen alrededor del elemento aún no se considera. El elemento liberará muy bien el espacio de su cuadro de borde. Pero a medida que se elimina, también se eliminan los márgenes y rellenos entre elementos adicionales y se libera espacio adicional. Los elementos que se encuentran más abajo en la página saltan repentinamente en esa cantidad. Este es un efecto no deseado.

Y aquí es donde las cosas se complican. El elemento del mensaje en sí tiene un margen superior e inferior de 1em . Puede haber un elemento hermano anterior o siguiente, o no. Puede tener su propio margen vertical, más o menos que el mensaje, o no, y también puede estar vacío (lo que parece no tomar parte en los cálculos del margen entre elementos). El elemento principal puede tener un relleno vertical o no. Mi mensaje se puede utilizar en cualquier lugar. Y siempre debe colapsar suavemente hasta desaparecer.

¿Cómo se puede hacer esto? ¿Cómo puedo determinar el espacio adicional (a la altura del propio elemento) que debo agregar a mi margen negativo?

PD: Para aclarar el título de la pregunta: necesito saber la cantidad de diferencia antes de eliminar el elemento.