✔ Vertikaler Abstand zwischen div-Containern entfernen

[chriss_2oo4]

Hi,

ich habe das Problem, dass ich mit folgendem CSS-Code einen vertikalen Abstand von etwa 5 Pixeln zwischen den div-Containern habe.

<div class="ContentBox">
	<div class="ContentHeader">Kopfzeile</div>
	<div class="ContentData">
		<p>Inhalt</p>
	</div>
	<div class="ContentFeeter">Fusszeile</div>
</div>

CSS-Code:

.ContentBox {
	padding: 0;
	width: 525px;
	margin-top: 15px;
}

.ContentHeader {
	margin: 0;
	padding: 0 0.5em;
	height: 25px;
	background: #fed url(img/tab_header.gif) no-repeat;
	font-weight: bold;
}

.ContentData {
	margin: 0;
	padding: 0 0.5em;
	background: #fed url(img/tab_mid.gif) repeat-y;
}

.ContentFeeter {
	height: 25px;
	margin: 0;
	padding: 0 0.5em;
	background: #fed url(img/tab_feeter.gif) no-repeat;
	text-align: right;
}

Kann mir jemand sagen, woran das mit dem abstand liegt? Margin ist doch 0

Danke!

Beste Grüße
Chriss

 

[Maik]

Hi,

Kann mir jemand sagen, woran das mit dem abstand liegt? Margin ist doch 0

aber nicht für das darauffolgende <p>-Element, das als "Blockelement" im Textfluß seinen eigenen Absatz erzeugt.

Solch einem Problemfall von unerwünschten Abständen lässt sich mit Hilfe des Universalselektors "*" zu Beginn des Stylesheets aus dem Weg gehen, der alle im HTML-Dokumentbaum enthaltenen Elemente miteinbezieht, und deren voreingestellten Polsterungseigenschaften zurücksetzt:

* {
margin:0;
padding:0;
}

Im nachfolgenden CSS wird dort ein Außen- und/oder Innenabstand angegeben, wo er im Textfluß tatsächlich erwünscht ist.

mfg Maik

 

[chriss_2oo4]

Hi Maik,

vielen Dank für Deine Hilfe! Den Universal-Selektor hab ich bereits in meinem CSS-File deklariert, gleich der erste CSS Block:

* { 
	padding: 0;
	margin: 0; 
}

Das komische an der Sache ist, dass span-Tags ohne diesen Leer-Raum angezeigt werden.

Beste Grüße!
Chriss

 

[Maik]

Wenn du diese Regel bereits im CSS deklariert hattest, dürfte da gar kein vertikaler Abstand zwischen den einzelnen Blöcken entstehen.

Das <span>-Element zählt zu den Inline-Elementen, die von sich aus keinen Absatz im Textfluß erzeugen.

mfg Maik