CSS Weiße Ränder zwischen Spans in einem Div Container

[Glycol]

Hey, ich habe folgendes Problem :



Eigentlich sind es 5 Spalten bzw 5 Spans mit einer Width von 20% also sollte es genau passen wenn alle 5 nebeneinander sind, jedoch habe ich wie man auf dem Bild sieht Weiße Ränder.
Hier ist der Code ausschnitt, vorweg, ich habe überall margin 0, padding 0 border 0 usw....

HTML

	<div id="kategorien">
					<span id="kategorie1">###TEXT1###</span>
					<span id="kategorie2">###TEXT2###</span>
					<span id="kategorie3">###TEXT3###</span>
					<span id="kategorie4">###TEXT4###</span>
					<span id="kategorie5">###TEXT5###</span>
		</div>

CSS

#kategorien
{
	position:absolute;
	width:100%;
	height: 100%;
	margin:0;
	padding:0;
	border:0;
	float:left;
	
	
}
#kategorie1
{
	position:relative;
	display:inline-block;
	height:100%;
	background-color:green;
	margin:0;
	padding:0;
	border:0;
	width:20%;
}
#kategorie2
{
	position:relative;
	display:inline-block;
	background-color:yellow;
	height:100%;
	width:20%;
	margin:0;
	padding:0;
}
#kategorie3
{
	position:relative;
	display:inline-block;
	background-color:gray;
	height:100%;
	width:20%;
	margin:0;
	padding:0;
}
#kategorie4
{
	position:relative;
	display:inline-block;
	background-color:brown;
	height:100%;
	width:20%;
	margin:0;
	padding:0;
}
#kategorie5
{
	position:relative;
	display:inline-block;
	background-color:#446353;
	height:100%;
	width:20%;
	color:red;
	margin:0;
	padding:0;
}
body,html
{
    width:100%;
    margin: 0;
    padding: 0;
}

 

[Yuuri]

Du musst die inneren divs floaten, sonst bleiben die Lücken wegen dem Whitespace im HTML bestehen. Ein Rat: Lies dich am besten gleich in Flexbox ein und lern nicht den Krampf von vor vielen vielen Jahren.

 

[pcBauer]

Hey,

Soweit ich das sehe liegt das am "display: inline-block".

gerade bei so einer Verteilung kann man wunderbar mit dem modernen Flexbox ansetzen.

Zudem kann man eine css-Klasse für alle Kategorien verwenden, sodass du den Style je nur einmal schreiben musst.

Hier mal meine Variante ohne Zwischenräume und mit weniger Style.

 

[Glycol]

Sehr nice, ich danke euch, jetzt ist alles so wie ich es mir vorgestellt hatte