Links werden "zusammengeschoben"

[Wolfsbein]

Hallo
folgender Code macht Probleme mit padding und margin:

a:link  {color: #cc3333; 
         text-decoration:none;
        } 
a:visited   {color:#cc3333;
             text-decoration:none;
            }        
a:hover     {color:#ffffcc;
             text-decoration:none;
            }
a:active    {color:#ffffcc;
             text-decoration:none;
            }        
         
a.Navi:link {font-weight:bold;
             border-left:3px solid #cc3333;
             padding:5px;
             margin:5px;
             background-color:#cccc99;
             
            }
a.Navi:visited  {font-weight:bold;
                 border-left:3px solid #cc3333;
                 padding:5px;
                 margin:5px;
                 background-color:#cccc99;
                } 
a.Navi:hover    {font-weight:bold;
                 border-left:3px solid #ffffcc;
                 padding:5px;
                 margin:5px;
                 background-color:#cccc99;
                }
a.Navi:active   {font-weight:bold;
                 border-left:3px solid #ffffcc;
                 padding:5px;
                 margin:5px;
                 background-color:#cccc99;
                }  
<a href="#" class="Navi" title="title">Kategorie</a><br />
<a href="#" class="Navi" title="title">Kategorie</a><br />
<a href="#" class="Navi" title="title">Kategorie</a><br />
<a href="#" class="Navi" title="title">Kategorie</a><br />
<a href="#" class="Navi" title="title">Kategorie</a><br />

Eigentlich sollten die Links den Abstand 5px voneindander haben (hauptsächlich nach oben und unten). Allerdings schieben alle meine Browser den Text übereinander (verschwindet hinter dem Hintergrund des Links). Also muss es ein Fehler von mir sein. Bitte sagt mir jemand welcher . Danke.

 

[Gumbo]

Kein Wunder. Du solltest dir mal die Auswirkungen von padding und margin ansehen.

<style type="text/css">
a:link, a:visited {
	color: #cc3333; 
	text-decoration: none;
} 
a:active, a:hover {
	color: #ffffcc;
	text-decoration: none;
} 
a.Navi:link, a:Navi:visited, a.Navi:active, a.Navi:hover {
	font-weight: bold;
	padding: 5px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 5px;
}
a.Navi:link, a.Navi:visited {
	border-left: 3px solid #cc3333;
	background-color: #cccc99;
}
a.Navi:active, a.Navi:hover {
	border-left: 3px solid #ffffcc;
	background-color: #cccc99;
}
</style>
<a href="#" class="Navi" title="title">Kategorie</a><br />
<a href="#" class="Navi" title="title">Kategorie</a><br />
<a href="#" class="Navi" title="title">Kategorie</a><br />
<a href="#" class="Navi" title="title">Kategorie</a><br />
<a href="#" class="Navi" title="title">Kategorie</a><p></p>


<span style="background-color:#f0f0ff; border:1px solid #000; padding:20px; margin:5px;">Text1</span><br />
<span style="background-color:#fff0f0; border:1px solid #000;">Text1</span><br />
<span style="background-color:#f0fff0; border:1px solid #000; padding:5px; margin:20px;">Text1</span>

 

[Wolfsbein]

Mich hat nur gewundert, dass das mit vertikalen Links geht, mit horizontalen aber nicht. Ich habs jetzt mit line-height gelößt.