Gernot Back: a in div vertical ausrichten?

Beitrag lesen

Hallo Beat,

Auch ein display:block ist bei den A-Elementen nicht unbedingt erforderlich, wenn sie einen Line-Height-Wert haben, der dem Height-Wert ihres padding-top- und -bottom-losen  umgebenden Mutter-Blockelements entspricht.

In der Regel möchtest du, dass ein ganzes Feld, und nicht nur der Wortbereich bei Navigationslinks klickbar ist. Deshalb display:block

... was bei Inline-Elementen, die man in ihrer Default-Display-Eigenschaft "inline" belässt, in der horizontalen Achse sowieso auch über Padding zu erreichen ist und in der vertikalen Achse dann, wenn man ihm über eine entsprechende Line-Height ausreichenden Platz gibt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Zweidimensionales Padding bei Inline-Elementen</title>  
<style type="text/css">  
[code lang=css]	a {  
		line-height:4.45em;  
		padding:1.5em;  
		background:pink;  
	}

</style>
</head>
<body>
<p>
  <a href="#">1. Link</a>
  <a href="#">2. Link</a><br />
  <a href="#">3. Link</a>
</p>
</body>
</html>[/code]

Gruß Gernot