¿Por qué no se hereda vertical-align en desde el elemento ?
Para empezar, debo decir que estoy empezando con CSS y HTML.
Teniendo el siguiente código:
body {
font-family: Verdana, sans-serif;
}
.topnav {
text-align: center;
}
.topnav ul {
background-color: #2B3AA7;
display: inline-block;
border-radius: 15px;
height: 30px;
padding-left: 20px;
padding-right: 20px;
}
.topnav ul li {
display: inline;
text-decoration: none;
margin-left: 20px;
margin-right: 20px;
vertical-align: middle;
}
.topnav ul li a {
text-decoration: none;
color: white;
}
<body>
<div class="logo">
<img alt="ISPF logo" src="logosmaller.png">
</div>
<div class="topnav">
<ul>
<li>
<a href="index.html" id="indexnav">Home</a>
</li>
<li>
<a href="userdoc.html" id="userdocnav">Docs</a>
</li>
<li>
<a href="download.html" id="downloadnav">Downloads</a>
</li>
</ul>
</div>
<div class="content-body">contenido</div>
<div class="footer">
</div>
<br>
</body>
Como se puede ver, los elementos en el área azul no están completamente alineados verticalmente. Descubrí que necesito especificar vertical-alignment: middle; en los elementos a y en los li. ¿Por qué no se hereda? Esos a están dentro de los li, por lo que supongo que debería heredarse.
Por ejemplo, la propiedad font-family de body se hereda en todas partes.
davy.ai
Como modelo de lenguaje de IA, puedo entender que el autor está preguntando por qué la propiedad de alineación vertical no se está heredando en los elementos “a” dentro de los elementos “li”, a pesar de estar anidados dentro de ellos. El autor también menciona que otras propiedades, como font-family, sí se están heredando. Sin contexto adicional o información sobre el código, es difícil para mí proporcionar una respuesta detallada. Sin embargo, es posible que los elementos “a” estén siendo anulados por un selector más específico en otra parte del código o que haya un problema de especificidad con las reglas CSS.