CSS-Eigenschaft zum Auffüllen von Text innerhalb von div

Question

Gibt es eine Möglichkeit, ein div Element einige Polsterung innerhalb seiner Grenze zu geben? Zum Beispiel geht der gesamte Text innerhalb meines Hauptelements div direkt an den Rand der Elementgrenze. Ich möchte als allgemeine Regel auf dieser Seite mindestens 10 bis 20 px Abstand zwischen dem Text und der Grenze haben.

Hier ist ein Screenshot zu veranschaulichen, was ich derzeit haben:

Answer 1

Ich sehe hier viele Antworten, die Sie haben Subtrahieren von der Breite des div und/oder mit Box-Sizing, aber alles, was Sie tun müssen, ist das Auffüllen der Child-Elemente des div in Frage. So zum Beispiel, wenn Sie einige Markup wie dieses:

<div id="container"> 
    <p id="text">Find Agents</p> 
</div> 

Alles, was Sie tun müssen, ist diese CSS anwenden:

#text { 
    padding: 10px; 
} 

Hier ist eine Geige zeigt den Unterschied: http://jsfiddle.net/CHCVF/2/

Oder, noch besser, wenn Sie mehrere Elemente haben und nicht das Gefühl haben, ihnen die gleiche Klasse zu geben, können Sie so etwas tun:

.container * { 
    padding: 5px 10px; 
} 

Wählen Sie alle untergeordneten Elemente aus, und weisen Sie ihnen das gewünschte Padding zu.Hier ist eine Geige davon in Aktion: http://jsfiddle.net/CHCVF/3/

Answer 2

Nur div { padding: 20px; } verwenden und subtrahieren 40px von Ihrer ursprünglichen div Breite.

wie Philip Wills wies darauf hin, können Sie auch box-sizing anstelle 40px von Substraktion:

div { 
    padding: 20px; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Die -moz-box-sizing ist für Firefox.

Answer 3

Padding ist eine Möglichkeit, eine Art Rand innerhalb der Div hinzuzufügen. Verwenden Sie
Gerade

div { padding-left: 20px; } 

Und die Größe mantain, würden Sie von der ursprünglichen Breite des Div -20px haben.

Answer 4

Die CSS-Eigenschaft, nach der Sie suchen, ist padding. Das Problem mit Padding ist, dass es die Breite des ursprünglichen Elements erhöht. Wenn Sie also ein div mit einer Breite von 300px haben und 10px Padding hinzufügen, beträgt die Breite jetzt 320px (10px links und 10px) auf der rechten Seite).

Um dies zu verhindern, können Sie Box-Sizing hinzufügen: border-box; zu dem Div, das macht es die angegebene Breite beibehalten, selbst wenn Sie Padding hinzufügen. So Ihre CSS würde wie folgt aussehen:

div { 
    box-sizing: border-box; 
    padding: 10px; 
} 

Sie können mehr über Box-Sizing gelesen und es ist Unterstützung Gesamt Browser hier:

http://www.paulirish.com/2012/box-sizing-border-box-ftw/