Hola, encontramos la respuesta a lo que necesitas, desplázate y la obtendrás a continuación.
Solución:
Yo diría que usando:
*
margin: 0;
padding: 0;
es una mala manera de resolver esto.
La razón por la que el margen h1 sobresale del padre es que el padre no tiene relleno.
Si agrega un relleno al elemento principal del h1, el margen estará dentro del elemento principal.
Restablecer todos rellenos y márgenes a 0 pueden causar muchos efectos secundarios. Entonces es mejor eliminar el margen superior para este título específico.
Algunos elementos HTML tienen márgenes predefinidos (a saber: body, h1 para h6, p, fieldset, form, ul, ol, dl, dir, menu, blockquote y dd).
En tu caso es el h1 causando su problema. Tiene margin: .67em por defecto. Si lo establece en 0, eliminará el espacio.
Para resolver problemas como estos en general, recomiendo usar las herramientas de desarrollo de su navegador. Para la mayoría de los navegadores: haga clic derecho en el elemento sobre el que desea obtener más información y seleccione “Inspeccionar elemento”. En la pestaña “Estilos”, en la parte inferior, tiene un modelo de caja CSS. Esta es una gran herramienta para visualizar bordes, relleno y márgenes y qué elementos son la raíz de sus dolores de cabeza de estilo.
Te recomendaría restablecer todos los elementos HTML antes de escribir tu css con:
*
margin: 0;
padding: 0;
Después de eso, puede escribir su css personalizado, sin ningún problema.
Comentarios y puntuaciones
Si haces scroll puedes encontrar las anotaciones de otros usuarios, tú aún puedes mostrar el tuyo si dominas el tema.