Mit dem FF-Inspector Gesamtbreite feststellen

[Martinus33]

Hallo,
ich möchte eine Website ohne CMS rein "statisch" nur mit HTML und CSS erstellen.

Mit dem Inspector von FF kann man die CSS-Regeln bestehender Sites analysieren. Ich mache mich damit gerade vertraut und bin auf etwas gestoßen, was ich nicht verstehe. Es betrifft die Gesamtbreite einer Webseite.

Ich schaue mir eine Webseite auf dem desktop mit dem FF an und mache ganz außen einen Rechtsklick + "untersuchen". Es geht dann der Inspector unten auf. Rechts bekomme ich Infos zu dem div-wrapper, der den gesamten Content im body umspannt (wird ja oft so gemacht). Siehe screenshot:



Wie der screenshot zeigt, hat die Webseite durch den div-wrapper eine Gesamtbreite von 1115px, per max-width: "1115px".
Der div-wrapper hat außerdem 10px padding.
Padding ist aber doch der Abstand nach innen, warum ist das 10px-padding in der Grafik des Boxmodelles außen und ergibt dann 1135px Gesamtbreite aus 1115 plus 2x10px links und rechts?

 

[floq0r]

Ev. hat ser wrapper das CSS rule box-sizing: border-box;

 

[Martinus33]

Wenn ich runterscrolle und mir alle Stylings zum div-wrapper anschaue, findet sich diese Anweisung nicht.

Da bei der Boxmodellgrafik die 3px margin-top des div-wrapper korrekt sind (oben außen), ist das innere, gestrrichelte Rechteck mit seinen "1115 x 7165" innen evtl. so gemeint sein, dass diese max-width-Angabe von 1115px durch das padding auf 1135 erweitert worden ist. Und deshalb nicht mehr so gilt, deswegen "gestrichelt".

Dann würde aber bedeuten, dass das explizit festgelegte max-width des div-wrappers, also die 1115px, durch ein padding von 10px ausgehebelt und auf 1135px erweitert. Kann das sein?

 

[floq0r]

Note: Remember that the height and width properties do not include padding, borders, or margins! They set the height/width of the area inside the padding, border, and margin of the element!

https://www.w3schools.com/css/css_d...ber that the height,and margin of the element!

 

[Martinus33]

Gute Idee von w3schools, dass man scheinbar jedes Thema immer gleich live ausprobieren kann.