Gerrit: horizontaler Außenabstand von inline-block Elementen

Beitrag lesen

SELF-Forum

horizontaler Außenabstand von inline-block Elementen

Gerrit
– Informationen zu den Bewertungsregeln

Hallo,

ich habe gerade ein doofes Problem und kommen beim besten Willen nicht auf die Lösung.

Folgende HTML-Seite

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
		<title>zusammenfallende Margins</title>
		<style>
			#inline1, #inline2 {
				display: inline-block;
				height: 100px;
				width: 100px;
				background: #ccc;
				margin: 0;
				padding: 0;
				border: 0;
			}
			#inline1 {
				margin-right: 20px;
			}
			#inline2 {
				margin-left: -20px;
			}
		</style>
	</head>
	<body>
			<div id="inline1">Inline 1</div>
			<div id="inline2">Inline 2</div>
	</body>
</html>

erzeugt zwischen den DIV-Boxen einen verbleibenden 4px breiten "Restabstand". Warum? (Wenn ich bspw. das 2. Element floate, fällt der Abstand komplett weg, und beide grenzen wie erwartet aneinander).

Kann mir bitte jemand helfen? Das wäre großartig! Gruß, Gerrit

Beitrag melden
–
Informationen zu den Bewertungsregeln