Platzierung des Rahmens innerhalb des div und nicht an dessen Rand

Question

Ich habe eine <div> Element, und ich möchte es mit einem Rahmen versehen. Ich weiß, dass ich schreiben kann style="border: 1px solid black" , aber dies fügt 2px auf jeder Seite des div, das ist nicht das, was ich will.

Ich würde lieber haben diese Grenze -1px von der Kante des div sein. Das div selbst ist 100px x 100px, und wenn ich eine Grenze hinzufügen, dann habe ich einige Mathematik zu tun, um die Grenze erscheinen zu lassen.

Gibt es eine Möglichkeit, dass ich die Grenze erscheinen, und sicherzustellen, dass das Feld noch 100px (einschließlich der Grenze) sein wird?

Answer 1

Obwohl diese Frage bereits hinreichend mit Lösungen unter Verwendung der box-shadow y outline Eigenschaften, möchte ich dies noch etwas erweitern für all diejenigen, die hier gelandet sind (wie ich) und nach einer Lösung für einen inneren Rand mit einen Ausgleich

Sagen wir also, Sie haben eine schwarze 100px x 100px div und müssen mit einem weißen Rand versehen werden, der einen innerer Versatz von z.B. 5 px - dies kann immer noch mit den oben genannten Eigenschaften erreicht werden.

box-shadow

Der Trick dabei ist, zu wissen, dass mehrere Kastenschatten erlaubt sind, wobei der erste Schatten oben liegt und die nachfolgenden Schatten eine niedrigere z-Reihenfolge haben.

Mit diesem Wissen wird die Box-Shadow-Deklaration sein:

box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;

div {
  width: 100px;
  height: 100px;
  background: black;
  box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; 
}

<div></div>

Im Grunde, was diese Erklärung sagt, ist: Rendering der letzten (10px weiß) Schatten zuerst, dann die vorherige 5px schwarzen Schatten darüber.

Skizze con Konturversatz

Um die gleiche Wirkung wie oben zu erzielen, müssten die Umrisserklärungen lauten:

outline: 5px solid white;
outline-offset: -10px;

div {
  width: 100px;
  height: 100px;
  background: black;
  outline: 5px solid white;
  outline-offset: -10px;
}

<div></div>

NB: outline-offset wird vom IE nicht unterstützt wenn das für Sie wichtig ist.

---

Codepen-Demo

Answer 2

Utilisez Pseudoelement :

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}

<div class='button'>Hello</div>

Verwendung von ::after gestalten Sie das virtuelle letzte Kind des ausgewählten Elements. content Eigenschaft erstellt eine anonyme ersetztes Element .

Wir enthalten das Pseudoelement mit absoluter Position relativ zum übergeordneten Element. Dann haben Sie die Freiheit zu haben, was benutzerdefinierte Hintergrund und / oder Grenze in den Hintergrund des Haupt-Element.

Dieser Ansatz hat keinen Einfluss auf die Platzierung des Inhalts des Hauptelements, was sich von der Verwendung von box-sizing: border-box; .

Betrachten Sie dieses Beispiel:

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    border: 5px solid #f00;
    border-left-width: 20px;
    box-sizing: border-box;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

Hier .button Die Breite wird durch das übergeordnete Element eingeschränkt. Die Einstellung der border-left-width passt die Größe der Content-Box und damit die Position des Textes an.

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

Die Verwendung des Pseudo-Element-Ansatzes hat keine Auswirkungen auf die Größe der Content-Box.

Je nach Anwendung kann die Verwendung eines Pseudo-Elements ein wünschenswertes Verhalten sein oder auch nicht.

Answer 3

Ich weiß, dies ist etwas älter, aber da die Schlüsselwörter "border inside" landete mich direkt hier, möchte ich einige Erkenntnisse, die erwähnenswert sein kann hier zu teilen. Wenn ich einen Rahmen auf den Hover-Status hinzufügen, bekam ich die Effekte, die OP spricht. Die Umrandung fügt Pixel zu den Abmessungen der Box hinzu, was sie unruhig macht. Es gibt zwei weitere Möglichkeiten, wie man damit umgehen kann, die auch für IE7 funktionieren.

1) Sie haben bereits eine Umrandung an dem Element angebracht und ändern einfach die Farbe. Auf diese Weise ist die Mathematik bereits enthalten.

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2 ) Kompensieren Sie Ihren Rahmen mit einem negativen Rand. Dadurch werden zwar immer noch die zusätzlichen Pixel hinzugefügt, aber die Positionierung des Elements ist nicht mehr sprunghaft bei

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}

Answer 4

11 Jahre später, aber hier ist die Antwort:

Verwenden Sie einfach outline :
outline: 0.2vw solid red;

Ich hoffe, ich kann jemandem helfen, der diese Frage auch 11 Yeas Later sieht.

Answer 5

Für eine konsistente Darstellung in neuen und älteren Browsern fügen Sie einen doppelten Container hinzu, der äußere mit der Breite, der innere mit dem Rahmen.

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

Dies gilt natürlich nur, wenn die genaue Breite wichtiger ist als zusätzliches Markup!