Soy relativamente nuevo en HTML y encontré este error después de usar display: flex. El área en la que se puede hacer clic en mis botones está aproximadamente 10 px por encima del botón real, y cuando uso el elemento de inspección, el resaltado del botón dice que está arriba de donde está el botón visible.
<body> <h1 id="HomepageTitle" style="display: flex; justify-content: center; font-family: sans-serif; color: black;">CoderTom</h1> <h2 id="HomepageHeader" style="display: flex; justify-content: center; font-family: sans-serif; color: blue;">Home</h3> <div class="button-group" style="display: flex; justify-content: center;"> <a href="contactpage.html"><button style="position : relative; top: 50px; background-color: rgb(0, 255, 55); font-family: sans-serif; font-weight: 700; color: black; width: 100%; height: 100%;">Contact</button></a> </div> <script src="application.js"></script> </body>parte superior de la propiedad: 50 px en la etiqueta de anclaje mueve el elemento 50 px hacia arriba. Supongo que querías dárselo a los padres (.button-group)
Te recomiendo diseñar la etiqueta como un botón y agregar 'display: block' También recuerda restablecer el estilo predeterminado del navegador