Wie kann ich einen Text mit einerm Rand versehen?

1 Günter Leipfinger

Hallo, ich möchte einen Text mit einem Rand außen herum versehen. Wie lautet der code dazu?

In CSS wird mit der Eigenschaft border ein Rahmen definiert, z.B.:

<p style="border: 1px solid black">
    irgendein Text, der einen Rand erhalten soll
</p>

Erläuterungen, wie man einen solchen Rahmen gestalten kann, finden sich auf SELFHTML:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/%C3%A4u%C3%9Fere_Gestaltung/Rahmen

Vielen Dank Jörg. Der Rahmen hat den Nachteil, dass er die gesamte Breite einnimmt und nicht nur den Text.

Mit "display: table-cell" kannst du den Rahmen auf die Textlänge beschränken:

<p style="display: table-cell; border: 1px solid black">
    irgendein Text, der einen Rand erhalten soll
</p>

Wenn du den Rahmen mehrfach verwenden möchtest, dann würde ich eine Klasse verwenden, z.B. "text-border":

<p class="text-border">
    irgendein Text, der einen Rand erhalten soll
</p>
<p class="text-border">
    noch ein gerahmter Text
</p>

... und die CSS-Definition oben in den <head> auslagern:

<style>
.text-border {
    display: table-cell; 
    border: 1px solid black;
}
</style>

Wie muß ich den code ergänzen, wenn ich den Abstand vom Text vergrößern will? Kann ich dem Hintergrund eine andere Farbe geben?

Der Innen-Abstand zum Rahmen wird mit der CSS-Eigenschaft padding definiert:

http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Abstand/padding

... und die Hintergrundfarbe mit background-color:

http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background-color

Den obigen CSS-Code könntest du also beispielsweise so erweitern, um einen Innenabstand von 5 Pixel und eine rote Hintergrundfarbe zu definieren:

<style>
.text-border {
    display: table-cell;
    border: 1px solid black;
    padding: 5px;
    background-color: #ff0000;
}
</style>

Verwandte Themen
Thema	Autor	Forum	Beiträge	Letzter Beitrag
Aufzählung neben Text	MarkusWi	HTML und CSS	3	23.01.2019 22:48
Wie kann ich Schrift und Hintergrundfarbe des Textfeldes verändern?	Günter Leipfinger	HTML und CSS	11	13.06.2018 11:20
Link wird über den Boxenrand geschoben	krieger98	HTML und CSS	6	21.12.2015 20:57
Schriftfarbe für 2 verschiedene User in Textarea ändern	Tombone	PHP und MySQL	4	03.02.2013 20:59
Hintergrund von loginfelgern veränder bei WebSpell	zaubercore	PHP und MySQL	2	08.10.2011 18:49
text bleibt in jedem browser und betriebssysthem gleich groß	andehrl	HTML und CSS	11	16.01.2011 04:19
"Duplicate entry" in der Eingabeseite mit entsprechendem text anzeigen	andehrl	PHP und MySQL	40	23.11.2010 19:20