Höhe von Elternelementen
2 
molily
Höhe von Elternelementen
Hallo,
ich suche gerade nach einer Möglichkeit, die Höhe von Elternelementen an die Höhe der Kindelemente anzupassen. Mein aktuelles Beispiel bezieht sich auf Links (<a>) in Listenelementen (<li>). Ein padding oder margin beim Kindelement, wird offensichtlich nicht vom Elternelement berücksichtigt. Ist es möglich so etwas zu erzwingen?
Hier ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li {
border: 1px solid yellow;
}
a {
padding: 10px;
border: 1px solid red;
}
</style>
</head>
<body>
<ul id="Navigation">
<li>
<a>Navi1</a>
</li>
<li>
<a>Navi2</a>
</li>
</ul>
</body>
</html>
Ist es möglich, die Höhe der <li> Elternelemente so anzupassen, dass auch das padding der <a> Kindelemente berücksichtigt wird.
Vielen Dank demjenigen, der mir das erklären kann.
MfG,
Oinosseus
-
Hallo,
a wird standardmäßig als Inline-Box (display: inline) dargestellt. Vertikales padding von Inline-Boxen erhöht nicht die Höhe der zugehörigen Zeilenbox und damit auch nicht die Höhe der umgebenden Block-Box. Vertikales margin wird m.W. komplett ignoriert.
Du suchst vermutlich display: block für die a-Elemente. Das sorgt dafür, dass margin und padding die Elternbox vergrößern. Auch um die Klickfläche zu vergrößern ist es üblich, a-Elemente in Navigationen mit display: block zu formatieren.
Mathias
-
Hallo Mathias,
vielen Dank für deine Antwort. Das war genau die Information die ich benötigt habe.
MfG,
Oinosseus
-