Warum "display: block" ?

Status
Nicht offen für weitere Antworten.
Hallo,

das folgende Beispiel sorgt dafür, dass eine Grafik bei 'rollover' durch eine andere Grafik ersetzt wird.
Weshalb muss 'display: block;' mit angegeben werden ?!

Ohne 'display: block;' wird die Grafik nicht angezeigt.
Ich verstehe auch nicht, weshalb ich die Größe der Grafik mit angeben muss. Weshalb wird die Grafik nicht so wie sie ist, ohne Angabe von 'display:block' und der Größe angezeigt ?

Gruß und Dank
Angelika


Code:
a#mybutton {
    width: 80px;
    height: 80px;
    background-image: url(bw.png);
    display: block;
    text-decoration: none;
}

a#mybutton:hover {
    background-image: url(color.png);
}


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
	<link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>

<a href="#" id="mybutton"></a>

</body>
</html>
 
Zuletzt bearbeitet:
Hi,

Inline-Elemente, wie das a-Element, können nicht wie die Block-Elemente eine Breiten- und/oder Höhenangabe besitzen.

Daher wird es mit der display:block-Eigenschaft ausgezeichnet, um so "Block-Level-Charakteristika" zu erhalten.

mfg Maik
 
Status
Nicht offen für weitere Antworten.
Zurück