Oinosseus: 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

  1. 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

    1. Hallo Mathias,

      vielen Dank für deine Antwort. Das war genau die Information die ich benötigt habe.

      MfG,
      Oinosseus