CSS outline-offset Eigenschaft

Die Eigenschaft outline-offset gibt den Abstand zwischen der Kontur eines Elements und seiner Randkante an. Der durch outline-offset hinzugefügte Zwischenraum ist immer transparent, sodass der Seitenhintergrund (oder was auch immer sich hinter dem Element befindet) durch den Spalt sichtbar wird.

Diese Seite erklärt, was outline-offset bewirkt, wie sich positive und negative Werte verhalten, wann man diese Eigenschaft einsetzt und worauf man achten sollte.

Wie sich Konturen von Rahmen unterscheiden

outline-offset ergibt erst dann Sinn, wenn man versteht, wie Konturen funktionieren, denn sie verhalten sich ganz anders als Rahmen:

Eine Kontur wird außerhalb der Randkante des Elements gezeichnet — standardmäßig liegt sie direkt am Rand an.
Eine Kontur beansprucht keinen Platz im Layout, sodass das Hinzufügen oder Verschieben einer Kontur niemals benachbarte Elemente verschiebt.
Eine Kontur kann nicht-rechteckig sein (zum Beispiel umschließt sie jede Zeile eines mehrzeiligen Inline-Elements).

Da eine Kontur das Layout nicht beeinflusst, ist outline-offset eine sichere Möglichkeit, die Kontur vom Element wegzuschieben (oder in es hineinzuschieben), ohne die Seite neu zu rendern. Diese Eigenschaft gehört zu den CSS3-Eigenschaften.

Sie ist nicht Teil der outline-Kurzschreibweise. Im Gegensatz zu outline-style, outline-color und outline-width muss outline-offset stets als eigene Deklaration gesetzt werden.

Anfangswert	0
Gilt für	Alle Elemente.
Vererbt	Nein.
Animierbar	Ja. Die Breite des Abstands ist animierbar.
Version	CSS3
DOM-Syntax	object.style.outlineOffset = "20px";

Syntax

CSS outline-offset Syntax

outline-offset: length | initial | inherit;

Beispiel der outline-offset Eigenschaft:

CSS outline-offset Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.ex1 {
        margin: 20px;
        border: 2px dotted #000;
        background-color: #8ebf42;
        outline: 4px solid #666;
        outline-offset: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Outline-offset property example</h2>
    <div class="ex1">The outline-offset is 10px</div>
  </body>
</html>

Probier es selbst »

Ergebnis

Im obigen Beispiel beträgt der Abstand zwischen der Kontur und dem Rand 10px, und der Seitenhintergrund ist durch diesen transparenten Spalt sichtbar.

Negative Werte

outline-offset akzeptiert auch negative Längen. Ein negativer Versatz zieht die Kontur nach innen, sodass sie über dem Innenabstand bzw. Inhalt des Elements gezeichnet wird, anstatt es zu umschließen:

outline-offset: -5px; /* outline moves 5px inside the border edge */

Das ist praktisch, wenn ein Fokusring innerhalb eines eng gepackten Elements liegen soll (zum Beispiel bei einem Button, der direkt an einer Containerkante liegt), ohne dass die Kontur von einem übergeordneten Element mit overflow: hidden abgeschnitten wird. Ein negativer Versatz, der größer als das Element ist, lässt die Kontur kollabieren und verschwinden.

Wann man sie verwenden sollte

Fokusringe mit Abstand. Kombiniere :focus-visible mit einem kleinen positiven Versatz, damit der Tastaturfokus-Ring das Element nicht zu sehr einengt. Entferne die Kontur niemals vollständig, ohne einen Ersatz bereitzustellen — sie ist das wichtigste visuelle Signal für Tastaturbenutzer.
Dekorative „Doppelrahmen"-Effekte ohne ein zweites Element hinzuzufügen, da der Abstandsspalt den Hintergrund freilegt.
Vermeidung abgeschnittener Ringe innerhalb von Scroll-Containern durch einen kleinen negativen Versatz.

Werte

Wert	Beschreibung
length	Abstand zwischen der Kontur und der Randkante eines Elements. Kann negativ sein, um die Kontur innerhalb der Randkante zu zeichnen. Der Standardwert ist `0`.
initial	Setzt die Eigenschaft auf ihren Standardwert.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Wichtige Hinweise

outline-offset wird nicht vererbt — untergeordnete Elemente übernehmen es nicht automatisch.
Prozentwerte sind nicht erlaubt; es funktionieren nur length-Einheiten (px, em, rem usw.).
Der Versatz wird nur gerendert, wenn eine Kontur tatsächlich sichtbar ist, d. h. wenn outline-style nicht none ist und die Breite größer als null ist.
Der Zwischenraum ist transparent — outline-offset kann keine eigene Farbe erhalten.

Übung

Was lässt sich über die CSS-Eigenschaft outline-offset anhand der in der angegebenen URL bereitgestellten Informationen sagen?

Die outline-offset-Eigenschaft ist kein Teil des CSS-Standards.Die outline-offset-Eigenschaft fügt einen Abstand zwischen einer Kontur und der Kante/dem Rand eines Elements hinzu.Die outline-offset-Eigenschaft erlaubt nur positive Werte, mit dem Standardwert 0.Der Anfangs-/Standardwert der outline-offset-Eigenschaft ist 0.Die outline-offset-Eigenschaft erbt den Wert vom übergeordneten Element.Prozentwerte können mit der outline-offset-Eigenschaft verwendet werden.