Frage von Rakozou, 31

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

Und was box-sizing : border box; und box-sizing: content-box; machen ^^

Antwort
von tDoni, 20

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
von tarni2101, 8

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? ^^

Kommentar von Rakozou ,

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?^^

Kommentar von tarni2101 ,

sry die späte antwort, aber ja.

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten