Debe tener en cuenta que los elementos HTML vienen con un estilo predeterminado y que cada navegador es ligeramente diferente. Luego, debe usar las herramientas de desarrollo del navegador para depurar su código. Haga clic derecho en su elemento HTML y seleccione inspeccionar.
Ahora, al resaltar sobre sus elementos HTML, se mostrarán sus márgenes, borde, relleno del elemento seleccionado, para que pueda ver que su h1 tiene un margen superior e inferior aplicado, recuerde su estilo predeterminado aplicado por el navegador.
main{ text-align: center; } h1{ font-size:3.5em; border-bottom: 2px solid #000; display: inline-block; padding: 0 10rem; margin-bottom: 0 } #aspiration{ text-align: center; } <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <p></p> <main> <h1>David Bandas</h1> </main> <p id="aspiration">Aspiration front-end developer</p> </body> </html>Salida: https://i.stack.imgur.com/NEWEr.png
Las etiquetas html vienen con una hoja de estilo de agente de usuario predeterminada. Si desea cambiar, debe restablecer este estilo con su estilo. Puede verificar este estilo predeterminado. En Chrome, simplemente presione ctrl + shift + i y seleccione su etiqueta. Puede ver el css predeterminado.