Wie verhindere ich, dass die Auffüllungseigenschaft in CSS die Breite oder Höhe ändert?

226

Ich erstelle eine Seite mit DIVs. Alles funktioniert, außer wenn ich einen DIV erstelle. Ich erstelle sie so (Beispiel):

newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}

Wenn ich die padding-leftEigenschaft hinzufüge , DIVändert sich die Breite der Eigenschaft auf 220 Pixel, und ich möchte, dass sie bei 200 Pixel bleibt.

Nehmen wir an, ich erstelle einen anderen DIVNamen anotherdiv, der genau der gleiche ist wie newdiv, und lege ihn hinein, habe newdivaber newdivkeine Polsterung und anotherdivhat padding-left: 20px. Ich bekomme das gleiche, newdivdie Breite wird 220px sein.

Wie kann ich dieses Problem beheben?

html css padding

— Sam
quelle

3

Ich bin traurig zu sagen, aber ich mag, wie IE damit umgeht ... Macht für mich viel mehr Sinn ...

— Nicu Surdu

389

Eigenschaft hinzufügen:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

Hinweis: Dies funktioniert in Internet Explorer unter Version 8 nicht.

— Pramod
quelle

14

Dies ist eine großartige Lösung für Ränder, aber wie hilft dies beim Auffüllen?

— Kato

6

Das ist pure Magie! - Es repariert das Box-Modell, das wir alle kennen und hassen! Das heißt, es funktioniert so, wie es die Intuition vorschlägt - und nicht die Spezifikationen -, aber soweit ich weiß, werden auch keine Spezifikationen gebrochen

— Technicalbloke

2

@technicalbloke Dein Link geht einfach zurück zu dieser Frage.

— Mhenry1384

11

Whoops yeah, kopiere und füge den Schwanz ein. Dies ist der Link, den ich teilen wollte ... paulirish.com/2012/box-sizing-border-box-ftw

— Technicalbloke

1

Viele von Ihnen sollten die Breite berücksichtigen: Auto-Trick unten. Funktioniert über Browser, weniger Code usw.

— Ryan Shillington

39

Setzen Sie ein div in Ihr newdiv mit width: auto undmargin-left: 20px

Entfernen Sie die Polsterung von newdiv.

Die W3 Box-Modellseite enthält gute Informationen.

— rvarcher
quelle

1

Warum zwei Divs verwenden, wenn Sie einen verwenden können?

— Aaron Franke

26

Versuche dies

box-sizing: border-box;

— Ajay Gupta
quelle

11

Wenn Sie Text innerhalb eines Divs einrücken möchten, ohne die Größe des Divs zu ändern, verwenden Sie text-indentstattdessen das CSS padding-left.

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}

<div class="border">
  Non indented
</div>

<br>

<div class="border indent">
  Indented
</div>

Erweitern Sie das Snippet

— mvndaai
quelle

1

Dies ist die einzige Lösung, die ich für mein Div mit fester Breite gefunden habe. Die Größe der Boxen hat die Polsterung leider nicht daran gehindert, die Breite zu beeinflussen. Vielen Dank, dass Sie auf diese tolle kleine Eigenschaft hingewiesen haben.

— Stevo

8

einfach hinzufügen box-sizing: border-box;

— Felix Wong
quelle

12

Dies ist einfach genau das gleiche wie das, was andere Antworten hier bereits sagen.

— Neil Lunn

1

Wenn ich die Eigenschaft padding-left hinzufüge, ändert sich die Breite des DIV auf 220px

Ja, das entspricht genau den Standards. So soll es funktionieren.

Nehmen wir an, ich erstelle einen anderen DIV mit dem Namen anotherdiv, genau wie newdiv, und füge ihn in newdiv ein, aber newdiv hat keine Auffüllung und anotherdiv hat padding-left: 20px. Ich bekomme das gleiche, newdivs Breite wird 220px sein;

Nein, newdiv bleibt 200px breit.

— Guffa
quelle

2

Guffa, so sollen die Standards überhaupt nicht funktionieren. Das Auffüllen sollte definitiv nicht die Abmessungen des Elements beeinflussen, auf das es angewendet wird. Ist es möglich, dass Sie mit größtem Respekt "Polsterung" mit "Rand" verwechseln?

— da5id

1

Ja, die Polsterung soll definitiv die Abmessungen des Elements beeinflussen. Ich denke, dass Sie verwirrt sind ... wie schlagen Sie vor, dass der Rand die Dimensionen des Elements beeinflussen würde?

— Guffa

Eigentlich weißt du, ich denke, wir haben beide in gewisser Weise Recht. Ich bin es so gewohnt, mit den Effekten umzugehen, dass ich den Standard völlig vergessen hatte. Ich fand hier eine gute Erklärung quirksmode.org/css/box.html

— da5id

Also, ich entschuldige mich, Herr Guffa. Aber für praktische Zwecke (worüber wir schließlich sprechen) ist mein Rat immer noch gut, nein?

— da5id

Nun, Sie haben Recht, soweit es einen Box-Modell-Fehler gibt, aber er trifft nicht auf diese Frage zu ... :)

— Guffa

-1

Ändern Sie einfach Ihre Div-Breite auf 160px, wenn Sie eine Auffüllung von 20px haben. Dadurch wird die Breite Ihres Div um 40px erhöht, sodass Sie 40px von der Breite abziehen müssen, damit Ihr Div normal aussieht und nicht durch zusätzliche Breite verzerrt wird Ihr Text ist völlig durcheinander.

— Sean
quelle

2

Dies entspricht der Antwort von @rvarcher.

— 8bitjunkie