Lo que no entiendo es cómo va a resolver eso lo de los botones desfasados. A menos que te estés refiriendo a algo que ya está resuelto desde hace mucho, arriesgando este tema al cierre, cuando todavía no me respondieron.
Aunque no creo. Porque ese ejemplo no funciona.
Pero si era así; en vez de
innerHTML se podría recomendar el uso de nodos, porque mover el margen no 'vacía' nada. Ni desaparece, allí se sigue viendo todo 'arriba' del
div contenedor. Y para colmo éste no "colapsa" la altura, sigue mostrando alguna pequeña reserva de la que hablábamos antes.
Para eso se usa
overflow:hidden, que permite achicar el contenedor hasta desaparecerlo.
Y hablando de desaparecer, con
display:none "borramos" el
div del contenido. ¿Cuál sería el sentido de moverlo con margen negativo?.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<body>
<div style="margin-top:100px; border:1px solid red;">
<div style="margin-top: -18px; color: black;
background-color: yellow; font-size: 18px;">
Texto contenido que se sigue viendo.
</div></div>
</body>
</html>