I'd like to close a message <div> element with a transition that smoothly reduces the element's vertical occupied space to zero. After the transition ends, the element will be removed from the document. There should be no additional jump of the document after this. The whole closing process is initiated by JavaScript from a click event handler.

The message element already has a transition to transform: scaleY(0) so it visually collapses. I've implemented the space freeing with a transition to margin-bottom: -...px where the value is computed by the element's actual height. (I ignore height changes while the transition is running, these shouldn't occur in practice.)

With this, the margin around the element is not considered yet. The element will free the space of its border box nicely. But as it is removed, additional inter-element margins and paddings are removed as well and additional space is freed. The elements further down on the page suddenly jump up by that amount. This is an undesired effect.

And this is where things get complicated. The message element itself has a top and bottom margin of 1em. There might be a previous or next sibling element, or not. It might have its own vertical margin, more or less than the message, or not, and it may also be empty (which seems to totally not take part in inter-element margin calculations). The parent element may have a vertical padding or not. My message can be used anywhere. And it should always smoothly collapse exactly to disappearing.

How can this be done? How can I determine the additional space (to the element's own height) that I must add to my negative margin?

PS: To clarify the question title: I need to know that difference amount before actually removing the element.