Estoy desarrollando un SPA usando Angular, y he especificado html, body { height: 100% } y body { margin: 0 } en CSS. En esta situación, si utilizo etiquetas HTML con márgenes predeterminados en un componente, como la etiqueta <h1> , la página se desbordará.
Esto parece deberse al hecho de que el margen del primer elemento del cuerpo se reemplaza por el margen del cuerpo, que es diferente del comportamiento en HTML simple. En HTML simple, el margen superior del primer elemento se ignora y el cuerpo nunca tiene un margen. Sin embargo, este comportamiento no es el caso en Angular (o React, para ser precisos).
¿Cuál es la causa de esto?
Además, ¿hay alguna forma de lograr el comportamiento HTML normal en Angular?
Las muestras en Stack Blitz son las siguientes:
Gracias por adelantado.
Parece que a su versión HTML le falta <!DOCTYPE html> , por lo que se representa de manera diferente. Y el desbordamiento es causado por el H1 que tiene un margen superior, lo que genera un margen entre el cuerpo y el html.
Una vez que haya agregado el tipo de documento, puede establecer margin-top: 0 para h1 y el problema ya no debería existir.