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

Wenn Sie box-sizing: border-box verwenden, bedeutet das nicht nur border, padding, margin, etc. Alle Elemente werden innerhalb des übergeordneten Element.

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>

Answer 2

Beste Cross-Browser-Lösung (vor allem für IE-Unterstützung) wie @Steve sagte, ist ein div 98px in der Breite und Höhe zu machen, als fügen Sie einen Rahmen 1px um ihn herum, oder Sie könnten ein Hintergrundbild für div 100x100 px machen und zeichnen Sie einen Rahmen auf sie.

Answer 3

Sie können Outline mit Offset betrachten, aber das braucht etwas Padding, um auf Ihrem Div zu existieren. Oder Sie können absolut einen Rahmen div innen, etwas wie positionieren

<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 des gefälschten Rahmen-Divs herumspielen, um es Ihren Wünschen anzupassen.

Answer 4

Eine modernere Lösung könnte die Verwendung von css sein variables y calc . calc wird weitgehend unterstützt, aber variables ist noch nicht im IE11 enthalten (Polyfills verfügbar).

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

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

Allerdings kommen dabei einige Berechnungen zum Einsatz, was mit der ursprünglichen Frage vermieden werden sollte. Ich denke, dies ist ein ok Zeit, um Berechnungen zu verwenden, wie sie durch die CSS selbst gesteuert werden. Es hat auch keine Notwendigkeit für zusätzliche Markup oder Zweckentfremdung andere CSS-Eigenschaften, die später benötigt werden können.

Diese Lösung ist nur dann wirklich sinnvoll, wenn ein eine feste Höhe ist nicht erforderlich .

Answer 5

Eine Lösung, die ich oben nicht gesehen habe, ist für den Fall, dass Sie Ihre Eingaben auffüllen, was ich 99 % der Zeit tue. Sie können etwas tun, entlang der Linien 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 gesamte Menü mit den Eigenschaften Rahmen, Auffüllen und Übergang zur Verfügung habe.