Was macht Box-sizing genau und wann sollte man das verwenden oder eher wie?

... komplette Frage anzeigen

2 Antworten

Also Element in HTML/CSS hat ja eine Höhe und eine Beite und kann dazu noch Padding, Border und Margin bekommen.

Beispiel:

.element {
    box-sizing: content-box;
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 5px;
    margin: 10px;
}

box-sizing ist standardmäßig auf content-box gestellt und dann wird dein Element so berechnet:

Erst wird dem Element seine Breite gegeben.
Dann wird das Padding oben drauf gepackt.
Und dann kommt die Border und danach der Margin als Abstand zu anderen Elementen.

Also ist dein Element 100px plus 40px (also 20px Padding links und rechts) breit und bekommt dann noch die Border links und rechts.
Insgesamt also 150px breit und 150px hoch.

Wenn du box-sizing aber auf border-box festlegst, dann wird die größe deines Elements anders berechnet. Dann wird es so interpretiert, dass deine width- und height-Angaben Padding und Border schon beinhalten und sie werden nicht oben drauf gerechnet.

War das verständich? ^^

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von Rakozou
10.07.2016, 19:29

also wenn ich width : 50px; und height: 50px; hab und danach noch z.B. Margin und Border einfüge , dann kann es größer als 50x50 sein , aber wenn ich border box einsetze ist es maximal 50x50.

So habe ich das jetzt verstanden :D ist das so richtig?^^

0

Mit "border box" kannst du bestimmen, dass Höhen- und Breitenangaben absolut sind. Also dass der Rahmen und "margin" nicht dazugezählt werden.

"content-box" ist der Standardwert. Dabei wird der Rahmen und Margin noch zu den Maßen dazugerechnet.

Schau dir dazu folgende Seiten mal an:

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

https://css-tricks.com/the-css-box-model/

https://css-tricks.com/box-sizing/

Antwort bewerten Vielen Dank für Deine Bewertung

Was möchtest Du wissen?