Polsterung am div border

Question

Ich möchte Padding auf eine CSS-Grenze setzen. Ziehen Sie es in ein Div, weg von der Kante. Ist dies möglich mit CSS (css3 ist in Ordnung, Webkit).

Hier ist das Design.

ich dies tat durch ein div in einem div platzieren, dann eine Grenze zum inneren div geben. Ich möchte das Markup so klein wie möglich machen, damit ich nur ein div verwenden kann, wenn es möglich ist.

Vielen Dank.

Answer 1

Sie sollten in der Lage sein, diese Eigenschaft mit der CSS-Umriss zu tun:

<style> 
.outer { 
     outline: 2px solid #CCC; 
     border: 1px solid #999; 
     background-color: #999; 
     } 
</style> 

<div class="outer"> 
example 
</div> 

Answer 2

Nein, das ist nicht möglich. Polsterung, Rand und Rahmen sind Teile von Elementen, Sie können keinen Rand oder einen Rand einen Rahmen geben.

Vielleicht, wenn Sie ein Beispiel von dem, was Sie versuchen, veröffentlichen, können wir mit alternativen Lösungen kommen?

-update- Mit Blick auf Ihr Beispiel, ich fürchte, es ist immer noch nicht möglich, zumindest nicht mit nur einem div. Ich bin auch kein Fan von Divitis, aber die extra Div ist wahrscheinlich die beste Option in diesem Fall.

Answer 3

Die Polsterung um den Rand (die ihn von der Kante trennen würde) wird als "Rand" bezeichnet. Weitere Einzelheiten finden Sie unter Box model.

Answer 4

Leider, ohne Hinzufügen eines anderen div, ich glaube nicht, dass Sie dies mit nur CSS tun können.

Je komplizierter Ihr Design wird, desto wahrscheinlicher werden Sie überflüssige HTML-Tags benötigen.

Ihre andere (auch nicht großartige) Option ist ein Bildhintergrund, oder wenn Sie sich irgendwie besser fühlen, können Sie Elemente Clientseite mit JQuery hinzufügen, wodurch die "Reinheit" Ihrer serverseitigen Dateien erhalten bleibt.

Viel Glück.

Answer 5

Sie können dies tun, indem Sie ein inneres div mit den gewünschten Rändern und ein äußeres div mit einer Anzeige erstellen: table. Etwas wie folgt aus:

<style> 
    .outer { 
     background: #ccc; 
     display: table; 
     width: 400px; 
    } 

    .inner { 
     border: 2px dashed #999; 
     height: 50px; 
     margin: 5px; 
    } 

</style> 

<div class="outer"> 

<div class="inner"> 
</div> 

</div> 

Answer 6

Statt Grenzen, können Sie Umriss Eigenschaft:

div{ 
height:300px; 
width:500px; 
background-color:lightblue; 
outline:dashed; 
outline-offset:-10px;  
} 

http://jsfiddle.net/H7KdA/