Warum vergrößert CSS-Padding das Element?

Ich versuche, meinem Div und meinem Textbereich etwas Polsterung zu geben. Wenn ich das mache, vergrößert es das Element, anstatt den Inhaltsbereich darin zu verkleinern. Gibt es eine Möglichkeit, das zu erreichen, was ich versuche?

Sie können box-sizing:border-boxdem Containerelement etwas hinzufügen , um eine Breite und Höhe anzugeben, die sich nicht ändern, wenn Sie dem Element Auffüllen und / oder Rahmen hinzufügen.

Siehe hier (MDN) für Spezifikationen.

Update (kopierter Kommentar zur Antwort)

Derzeit wird der Wert border-boxgemäß den MDN-Spezifikationen in allen gängigen Browsern unterstützt

Einige Browser erfordern natürlich das richtige Präfix, dh -webkitund -mozwie Sie hier deutlich sehen können

Gemäß den CSS2-Spezifikationen entspricht die gerenderte Breite eines Elements vom Typ Box der Summe aus Breite, linkem / rechtem Rand und linkem / rechtem Abstand (linker / rechter Rand kommt ebenfalls ins Spiel). Wenn Ihre Box eine Breite von '100%' hat und auch Rand, Rand und Polsterung hat, beeinflussen (vergrößern) sie die Breite, die das Objekt einnimmt.

Wenn Ihr Textbereich also 100% breit sein muss, weisen Sie die Werte width, margin-left / right, border-left / right und padding-left / right so zu, dass ihre Summe 100% entspricht.

In CSS3 haben wir drei Modelle mit Boxgröße . Sie können border-boxModell verwenden:

Die angegebene Breite und Höhe (und die jeweiligen Min / Max-Eigenschaften) für dieses Element bestimmen den Rahmen des Elements. Das heißt, alle auf dem Element angegebenen Polsterungen oder Ränder werden innerhalb dieser angegebenen Breite und Höhe angeordnet und gezeichnet. Die Inhaltsbreite und -höhe werden berechnet, indem die Rand- und Füllbreiten der jeweiligen Seiten von den angegebenen Eigenschaften "Breite" und "Höhe" subtrahiert werden.

Dies war ein Chaos im W3C-Bereich, und verschiedene Browser haben diese Komplexität nur mit ihren eigenen Versionen von Box-Modellen erhöht. Anstatt zu überlegen, welcher Browser oder welche CSS-Einstellung den Trick macht, verpacke ich den Inhalt der Box einfach in eine weitere DIV-Anweisung und verwende Ränder für diesen DIV, anstatt wie folgt Auffüllungen zu verwenden:

<div id="container" style="width: 300px; border: 10px solid red;">
   <div id="content" style="width: 250px; margin: 25px;">
      Some content
   </div>
</div>

Dies funktioniert zwar nur für Container mit fester Größe

Dies hängt vom Browser und der Implementierung des Box-Modells ab . Was Sie erleben, ist das richtige Verhalten.

IE hat es traditionell falsch verstanden: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Für eine browserübergreifendere Lösung können Sie dieses Verhalten vermeiden, indem Sie jedes Tag, das aufgefüllt werden muss, in ein anderes Tag mit fester Breite einschließen und ihm width: auto zuweisen. Wenn das übergeordnete Element eine Breite von x hat und Sie dem untergeordneten Element eine Auffüllung hinzufügen, erbt das untergeordnete Element die gesamte Breite von x, wobei das Auffüllen korrekt angewendet wird, ohne die übergeordnete oder die eigene übergeordnete Breite zu ändern.

Ein div standardmäßig die Breite des übergeordneten Container nimmt, so Browser Kompatibilitätsprobleme zu vermeiden, könnten Sie ein Add Kind div in der angegebenen div dann die gewünschte Polsterung zum hinzufügen Kind div .

NB - Geben Sie dem untergeordneten Div keine Breite an, da diese beim Hinzufügen von Auffüllungen zunehmen würde