<code> und padding

StephanZ

Ich bastle gerade an meinem CSS rum.

Code

code {


color:red;
padding:0rem 3rem 0rem 3rem;


}

Ich gebe im Beitragseditor im Textmodus folgendes ein

Code

<code> code code code codecode codecode code  code code  code codecode code  code code  code code  code codecode code  code code  code code  code codecode code  code code  code code  code code  code codecode code </code>

ein.

Da bei mir der Text rot wird, scheine ich ja <code> anzusprechen. Aber bei padding reagiert der Codeabschnitt rein gar nicht.

Irgendeinen Hinweis, woran es liegen könnte?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

Link zur Problemstelle?

StephanZ

Zitat von maxe

Link zur Problemstelle?

Lokale XAMPP Installation.

MrMurphy

Hallo

Das von dir gezeigte padding funktioniert, da padding-top und padding-bottom 0rem betragen.

Wenn du padding-top und padding-bottom einen anderen (höheren) Wert geben willst musst du aus dem code-Element ein Block-Element machen.

Gruss

MrMurphy

StephanZ

Zitat von MrMurphy

Hallo
Das von dir gezeigte padding funktioniert, da padding-top und padding-bottom 0rem betragen.
Wenn du padding-top und padding-bottom einen anderen (höheren) Wert geben willst musst du aus dem code-Element ein Block-Element machen.
Gruss
MrMurphy

Du willst mir sagen, die 3rem funktionieren nicht, weil woanders 0 steht?

SirEctor

Ich schätze der CSS Code wird von einer anderen Regel überschrieben. Man müsste es also mal sehen. Oder du versuchst !important

danielgoehr

Zitat von StephanZ

Du willst mir sagen, die 3rem funktionieren nicht, weil woanders 0 steht?

Nein, er möchte dir sagen, dass padding-top und padding-bottom nicht funktionieren (bzw. nicht den gewünschten/erwarteten Effekt haben), weil <code> ein Inline-Element ist.

MrMurphy

Hallo

Zitat

Du willst mir sagen, die 3rem funktionieren nicht, weil woanders 0 steht?

Nein. Die 3rem funktionieren doch.

Eventuell hast du falsche Vorstellungen wie padding überhaupt funktioniert.

Das code-Element ist ein sogenanntes Inline-Element.

Dadurch wirkt sich padding nur zu Beginn der ersten Zeile des Elements und nur nach Ende der letzten Zeile des Elements aus.

Bei inline-Elementen wirkt sich padding weder auf den oberen noch auf den unteren Abstand aus.

Das padding wirkt auch nicht auf den Inhalt des Elements, also die einzelnen Worte.

Dein Beispiel ist auch schlecht zum Testen geeignet. Probier dein CSS mal bei folgendem html-Quelltext aus und spiel mit den Werten rum, dann sollte es deutlicher werden:

Code

<p>Dies ist ein Text <code> code code code codecode codecode code  code code  code codecode code  code code  code code  code codecode code  code code  code code  code codecode code  code code  code code  code code  code codecode code </code> mit einem eingebetteten code-Element.</p>

Gruss

MrMurphy

b3317133

Evtl. auch mal mit der Verwendung von [FONT=courier new]display: inline-block;[/FONT] oder auch [FONT=courier new]display: block;[/FONT] experimentieren...

Willkommen! Melden Sie sich an oder registrieren Sie sich.

<code> und padding

Jetzt mitmachen!