Posts Tagged: CSS

CSS3: Padding bei mehrzeiligen Inline-Elementen

Das Padding links oder rechts bei Inline-Elementen wie <span> funktioniert zwar wunderbar, aber nur so lange wie diese Inline-Elemente nicht über eine Zeile hinausgehen. Bei mehrzeiligen Elementen erscheint der Abstand in der ersten Zeile links und in der letzten Zeile rechts.

 

html-Code:

1
2
3
4
5
<div class="example-container">
    <p>
        <span class="example-highlight">Hervogehobener, mehrzeiliger Text</span>
    </p>
</div>
<div class="example-container">
	<p>
		<span class="example-highlight">Hervogehobener, mehrzeiliger Text</span>
	</p>
</div>

 

CSS:

1
2
3
4
5
6
7
8
.example-container {
    width: 200px;
}
.example-highlight {
    background: #ff0000;
    color: #fff;
    padding: 3px 10px;  
}
.example-container {
	width: 200px;
}
.example-highlight {
	background: #ff0000;
	color: #fff;
	padding: 3px 10px;	
}

 

Heraus kommt folgendes:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt

 

Das ist kein Fehler, sondern ist absolut standardkonform. Wenn man diesen Abstand aber auch in Zeile 2 braucht, aber trotzdem – aus irgendwelchen Gründen – ein Inline-Element verwenden muss, gibt’s mittels CSS3 einen einfachen Trick: der doppelte box-shadow.

 

CSS:

1
2
3
4
5
6
7
.example-hightlight {
    background:#ff0000;color:#fff;
    padding: 3px 0;
    box-shadow:10px 0 0 #ff0000,-10px 0 0 #ff0000;
    -moz-box-shadow:10px 0 0 #ff0000,-10px 0 0 #ff0000;
    -webkit-box-shadow:10px 0 0 #ff0000,-10px 0 0 #ff0000;
}
.example-hightlight {
	background:#ff0000;color:#fff;
	padding: 3px 0;
	box-shadow:10px 0 0 #ff0000,-10px 0 0 #ff0000;
	-moz-box-shadow:10px 0 0 #ff0000,-10px 0 0 #ff0000;
	-webkit-box-shadow:10px 0 0 #ff0000,-10px 0 0 #ff0000;
}

 

Ergebnis:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt