Platzieren Sie den Rand innerhalb von div und nicht an dessen Rand

Ich habe ein <div>Element und möchte es begrenzen. Ich weiß, dass ich schreiben kann style="border: 1px solid black", aber dies fügt 2px zu beiden Seiten des Div hinzu, was nicht das ist, was ich will.

Ich hätte lieber diesen Rand -1px vom Rand des Div entfernt. Das div selbst ist 100px x 100px groß. Wenn ich einen Rahmen hinzufüge, muss ich etwas Mathematik ausführen, damit der Rand angezeigt wird.

Gibt es eine Möglichkeit, den Rahmen anzuzeigen und sicherzustellen, dass das Feld weiterhin 100 Pixel groß ist (einschließlich des Rahmens)?

Setzen Sie die box-sizingEigenschaft auf border-box:

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}

<div>Hello!</div>
<div>Hello!</div>

Es funktioniert auf IE8 und höher .

Sie können auch Box-Shadow wie folgt verwenden:

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

Beispiel hier: http://jsfiddle.net/nVyXS/ ( Bewegen Sie den Mauszeiger, um den Rand anzuzeigen)

Dies funktioniert nur in modernen Browsern. Zum Beispiel: Keine IE 8-Unterstützung. Weitere Informationen finden Sie unter caniuse.com (Box-Shadow-Funktion) .

Wahrscheinlich ist es eine verspätete Antwort, aber ich möchte mit meinen Erkenntnissen teilen. Ich habe 2 neue Ansätze für dieses Problem gefunden, die ich hier in den Antworten nicht gefunden habe:

Innere Grenze durch box-shadowCSS-Eigenschaft

Ja, Box-Shadow wird verwendet, um den Elementen Box-Shadows hinzuzufügen. Sie können jedoch einen insetSchatten angeben , der eher wie ein innerer Rand als wie ein Schatten aussieht. Sie müssen nur horizontale und vertikale Schatten auf 0pxund die spreadEigenschaft " " von box-shadowauf die Breite des gewünschten Rahmens setzen. Für den 'inneren' Rand von 10px würden Sie also Folgendes schreiben:

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

Hier ist ein jsFiddle- Beispiel, das den Unterschied zwischen box-shadowRand und 'normalem' Rand veranschaulicht . Auf diese Weise betragen Ihr Rand und die Feldbreite einschließlich des Rahmens insgesamt 100 Pixel.

Mehr über Box-Shadow: hier

Rahmen durch Umriss CSS-Eigenschaft

Hier ist ein anderer Ansatz, aber auf diese Weise würde der Rand außerhalb des Rahmens liegen. Hier ist ein Beispiel . Wie aus dem Beispiel hervorgeht, können Sie die CSS- outlineEigenschaft verwenden, um den Rahmen festzulegen , der die Breite und Höhe des Elements nicht beeinflusst. Auf diese Weise wird die Rahmenbreite nicht zur Breite eines Elements hinzugefügt.

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

Mehr zur Gliederung: hier

Yahoo! Das ist wirklich möglich. Ich habe es gefunden.

Für den unteren Rand:

div {box-shadow: 0px -3px 0px red inset; }

Für die obere Grenze:

div {box-shadow: 0px 3px 0px red inset; }

Verwenden Sie ein 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>

Mit ::afterSie gestalten Sie das virtuelle letzte untergeordnete Element des ausgewählten Elements. contentEigenschaft erstellt ein anonymes ersetztes Element .

Wir enthalten das Pseudoelement unter Verwendung der absoluten Position relativ zum übergeordneten Element. Dann haben Sie die Freiheit, jeden benutzerdefinierten Hintergrund und / oder Rand im Hintergrund Ihres Hauptelements zu haben.

Dieser Ansatz wirkt sich nicht auf die Platzierung des Inhalts des Hauptelements aus, was sich von der Verwendung unterscheidet 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 wird die .buttonBreite mithilfe des übergeordneten Elements eingeschränkt. Durch Einstellen von wird die border-left-widthGröße des Inhaltsfelds und damit die Position des Texts angepasst.

.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 Pseudoelement-Ansatzes hat keinen Einfluss auf die Größe des Inhaltsfelds.

Abhängig von der Anwendung kann die Verwendung eines Pseudoelements ein wünschenswertes Verhalten sein oder auch nicht.

Obwohl diese Frage bereits mit Lösungen unter Verwendung der Eigenschaften box-shadowund angemessen beantwortet wurde outline, möchte ich dies für alle, die hier gelandet sind (wie ich), die nach einer Lösung für eine innere Grenze mit Versatz suchen, etwas erweitern

Nehmen wir also an, Sie haben ein schwarzes 100px x 100px divund müssen es mit einem weißen Rand einfügen - der einen inneren Versatz von 5px hat (sagen wir) - dies kann immer noch mit den obigen Eigenschaften durchgeführt werden.

Box Schatten

Der Trick dabei ist zu wissen, dass mehrere Box-Schatten zulässig sind, wobei der erste Schatten oben liegt und nachfolgende Schatten eine niedrigere Z-Reihenfolge haben.

Mit diesem Wissen lautet die Box-Shadow-Deklaration:

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>

Grundsätzlich heißt es in dieser Erklärung: Rendern Sie zuerst den letzten (10 Pixel weißen) Schatten und dann den vorherigen 5 Pixel großen schwarzen Schatten darüber.

Umriss mit Umrissversatz

Für den gleichen Effekt wie oben wären die Gliederungserklärungen:

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

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

<div></div>

NB: Wird outline-offset vom IE nicht unterstützt, wenn dies für Sie wichtig ist.

Codepen-Demo

Sie können die Eigenschaften verwenden outlineund outline-offsetmit einem negativen Wert anstelle eines regulären Werts borderfunktioniert für mich:

div{
    height: 100px;
    width: 100px;
    background-color: grey;
    margin-bottom: 10px; 
}

div#border{
    border: 2px solid red;
}

div#outline{
    outline: 2px solid red;
    outline-offset: -2px;
}

Using a regular border.
<div id="border"></div>

Using outline and outline-offset.
<div id="outline"></div>

Ich weiß, dass dies etwas älter ist, aber da mich die Schlüsselwörter "border inside" direkt hier gelandet haben, möchte ich einige Ergebnisse mitteilen, die hier erwähnenswert sein könnten. Als ich dem Schwebezustand einen Rand hinzufügte, bekam ich die Effekte, von denen OP spricht. Der Rand zeigt Pixel in der Größe des Felds an, wodurch es nervös wurde. Es gibt zwei weitere Möglichkeiten, wie man damit umgehen kann, die auch für IE7 funktionieren.

1) Hängen Sie bereits einen Rand an das Element und ändern Sie 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 Rand mit einem negativen Rand. Dadurch werden immer noch die zusätzlichen Pixel hinzugefügt, aber die Positionierung des Elements ist nicht sprunghaft

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

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

Fügen Sie für ein konsistentes Rendern zwischen neuen und älteren Browsern einen doppelten Container hinzu, den äußeren mit der Breite und den inneren mit dem Rand.

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

Dies ist natürlich nur dann der Fall, wenn Ihre genaue Breite wichtiger ist als ein zusätzliches Markup!

Wenn Sie die Größe von Feldern verwenden: Rahmen bedeutet nicht nur Rahmen, Auffüllen, Rand usw. Alle Elemente werden in das übergeordnete Element eingefügt.

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}

<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>

Die beste browserübergreifende Lösung (hauptsächlich für die IE-Unterstützung), wie @Steve sagte, besteht darin, ein div 98px in Breite und Höhe zu erstellen, als einen Rand 1px um ihn herum hinzuzufügen, oder Sie könnten ein Hintergrundbild für div 100x100 px erstellen und einen Rand darauf zeichnen.

Sie können Umrisse mit Versatz betrachten, dies erfordert jedoch eine gewisse Auffüllung, um auf Ihrem Div vorhanden zu sein. Oder Sie können einen Border Div absolut darin positionieren, so etwas wie

<div id='parentDiv' style='position:relative'>
  <div id='parentDivsContent'></div>
  <div id='fakeBordersDiv' 
       style='position: absolute;width: 100%;
              height: 100%;
              z-index: 2;
              border: 2px solid;
              border-radius: 2px;'/>
</div>

Möglicherweise müssen Sie mit den Rändern an den gefälschten Rändern herumspielen, um sie nach Ihren Wünschen anzupassen.

Eine modernere Lösung könnte die Verwendung von CSS variablesund sein calc. calcwird weitgehend unterstützt, variablesist jedoch noch nicht in IE11 (Polyfills verfügbar).

:root {
  box-width: 100px;
  border-width: 1px;
}

#box {
  width: calc(var(--box-width) - var(--border-width));
}

Obwohl dies einige Berechnungen verwendet, die mit den ursprünglichen Fragen vermieden werden sollten. Ich denke, dies ist ein guter Zeitpunkt, um Berechnungen zu verwenden, da diese vom CSS selbst gesteuert werden. Es ist auch nicht erforderlich, zusätzliche Markups zu erstellen oder andere CSS-Eigenschaften zu missbrauchen, die später möglicherweise benötigt werden.

Diese Lösung ist nur dann wirklich nützlich, wenn keine feste Höhe benötigt wird .

Eine Lösung, die ich oben nicht gesehen habe, ist der Fall, in dem Ihre Eingabe aufgefüllt ist, was ich in 99% der Fälle mache. Sie können etwas in der Art von ...

input {
  padding: 8px;
}

input.invalid {
  border: 2px solid red;
  padding: 6px; // 8px - border or "calc(8px - 2px)"
}

Was mir daran gefällt, ist, dass ich für jede Seite das vollständige Menü mit Rahmen + Auffüllen + Übergangseigenschaften habe.