Ich habe ein <div>-Element und möchte es mit einem Rahmen versehen. Ich weiß, ich kann schreiben
style="border: 1px solid black"` schreiben kann, aber das fügt 2px auf jeder Seite des div-Elements hinzu, was nicht das ist, was ich will.
Ich würde lieber haben diese Grenze -1px von der Kante des div sein. Die div selbst ist 100px x 100px, und wenn ich einen Rahmen hinzufügen, dann habe ich einige Mathematik zu tun, um die Grenze erscheinen.
Gibt es eine Möglichkeit, dass ich die Grenze erscheinen, und stellen Sie sicher, dass das Feld noch 100px (einschließlich der Grenze) sein wird?
Setzen Sie die Eigenschaft box-sizing
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 mit IE8 & oben.
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:
(zum Anzeigen des Rahmens den Mauszeiger bewegen)Dies funktioniert nur in modernen Browsern. Zum Beispiel: Keine Unterstützung für IE 8. Siehe caniuse.com (box-shadow feature) für weitere Informationen.
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!