Setzen den inneren Rahmen in CSS

Ein innerer Rahmen kann bedeuten, dass die angegebenen Abmessungen eines Elements trotz Rahmen fest bleiben, oder dass innerhalb seiner Kante eine sichtbare Linie gezeichnet wird. Verwenden Sie box-sizing: border-box für das erste Ziel, box-shadow: inset für eine scharfe innere Linie oder einen negativen outline-offset, um eine Kontur nach innen zu verschieben.

Mit der Eigenschaft box-sizing den inneren Rahmen in CSS festlegen

box-sizing: border-box bezieht das Padding und den Rahmen eines Elements in seine angegebene Breite und Höhe ein. Die Eigenschaft steuert die Größenberechnung; sie zeichnet keine separate Linie innerhalb des Elements. Verwenden Sie für ein quadratisches Element mit 200px Seitenlänge und einem roten Rahmen von 10px die Angaben box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;. Die äußere Box bleibt 200 mal 200 Pixel groß, und der rote Rahmen nimmt einen Teil dieser Fläche ein. Fügen Sie padding hinzu, wenn der Inhalt Abstand zum Rahmen benötigt. Bei der Standardeinstellung content-box beziehen sich Breite und Höhe auf den Inhaltsbereich; Padding und Rahmen vergrößern daher die Außenmaße. border-box ist nützlich, wenn eine Komponente in eine vorgegebene Layoutgröße passen muss; die Eigenschaft ersetzt nicht die Wahl einer geeigneten Rahmenbreite.

Dieses eigenständige JavaScript-Beispiel gibt HTML mit denselben Größen- und Rahmenangaben aus:

const html = '<div style="box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;">Content</div>';
console.log(html);

<div style="box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;">Content</div>

Fügen Sie das ausgegebene Markup in ein HTML-Dokument ein, um das quadratische Element mit fester Größe anzuzeigen.

Mit der Eigenschaft box-shadow den inneren Rahmen in CSS festlegen

Verwenden Sie einen box-shadow mit inset, wenn Sie eine sichtbare Linie zeichnen möchten, ohne die Layoutgröße des Elements zu verändern. Für ein grünes Quadrat mit 200px Seitenlänge und einer roten Linie von 10px fügen Sie dieses CSS zu einem <div>Content</div> hinzu: <div style="width: 200px; height: 200px; background: green; box-shadow: inset 0 0 0 10px red;">Content</div>. Die ersten beiden Schattenwerte legen den horizontalen und vertikalen Versatz fest. Hier sind beide null, sodass die Linie an allen Seiten gleichmäßig verläuft. Der dritte Wert ist die Unschärfe; mit null entsteht eine scharfe Kante. Der vierte Wert ist die Ausdehnung und bestimmt in diesem Beispiel die Dicke der Linie. inset zeichnet den Schatten innerhalb der Box. Ändern Sie Farbe oder Ausdehnung, um das Erscheinungsbild anzupassen; Unschärfe und Ausdehnung können gegebenenfalls weggelassen werden, da beide standardmäßig null sind. Da der Schatten keinen Platz im Layout beansprucht, behalten benachbarte Elemente ihre Position. Wenn Sie zusätzlich einen Rahmen festlegen, bleibt dieser bestehen und kann einen Teil des inneren Schattens verdecken.

Mit den Eigenschaften outline und outline-offset den inneren Rahmen in CSS festlegen

Eine Kontur wird um ein Element herum gezeichnet und beansprucht keinen Platz im Layout. Legen Sie für ein grünes, quadratisches <div>Content</div> mit 200px Seitenlänge outline: 5px solid red; outline-offset: -5px; fest, um die rote Kontur nach innen zu verschieben. Der negative Versatz zieht die Kontur von der Außenkante in Richtung Inhalt; er macht aus einer Kontur keinen Rahmen. Da die Kontur über dem Element gezeichnet wird, kann sie Text oder andere Inhalte nahe der Kante überlagern. Verwenden Sie diese Methode, wenn eine solche Überlagerung akzeptabel ist. Möchten Sie eine innere Linie, die innerhalb der gezeichneten Elementfläche bleibt, wählen Sie box-shadow.