Wie kann ich einem Div einen Rahmen hinzufügen, ohne seine Größe zu erhöhen?

Eingebetteter Rahmen innerhalb eines Div

Um einen Rahmen innerhalb eines div-Elements einzubinden, ohne seine Abmessungen zu erweitern, verwenden Sie die Box-Sizing-Eigenschaft. Standardmäßig betrachten Browser Rahmen und Innenabstände als Teil des Elementinhalts und erweitern die Größe des Elements, um sie aufzunehmen. Wenn Sie box-sizing jedoch auf „border-box“ setzen, wird der Browser angewiesen, den Rahmen in die Gesamtgröße des Elements einzubeziehen, um sicherzustellen, dass er unabhängig von der Breite des Rahmens konsistent bleibt.

In Ihrem Beispiel können Sie den folgenden Stil anwenden:

div {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

Mit diesem Stil wird der Rahmen 1 Pixel innerhalb der Ränder des Divs platziert, ohne seine Gesamtabmessungen zu ändern. Dadurch wird das Problem gelöst, dass zusätzliche Berechnungen durchgeführt werden müssen, um die Breite des Rahmens anzupassen.

Das obige ist der detaillierte Inhalt vonWie kann ich einem Div einen Rahmen hinzufügen, ohne seine Größe zu erhöhen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!