it-swarm.com.de

"Effektive Breite" eines CSS-Elements könnte vernünftigerweise enthalten, was? Breite,? Rand ?,? Polsterung?

Eric Meyer hat gerade getwittert, dass er in diesem Quiz 100% erreicht hat:

http://net.tutsplus.com/quizzes/nettuts-quiz-1-beginner-css/

Also habe ich das Quiz gemacht und am Ende haben sie mir gesagt, dass ich eine Frage falsch gestellt habe:

Was ist die effektive Breite des Containers? #container {width: 100px; padding: 10px; margin: 20px;}

Worauf ich geantwortet habe: 20px + 100px + 20px = 140px

Nach viel Arbeit habe ich herausgefunden, dass die vom Quiz vorgeschlagene "richtige" Antwort 120px war.

Könnte jemand erklären, warum 120px eine angemessenere Antwort wäre?

Bearbeiten: Erstellt eine Jsfiddle der Situation, und es scheint, dass (zum Beispiel) Inline-Block-Elemente mit Polsterung die Polsterung in die Breite integrieren, was ich irgendwie die ganze Zeit ohne es zu merken geschafft habe.

4
Kzqai

Abstand ist Raum innerhalb des Objekts, Rand ist Raum außerhalb des Objekts. Die width-Eigenschaft gibt an, wie breit das Material im Container ist. Da die effektive Breite hier bedeutet, wie viel Platz das Objekt einnimmt, zählt der Rand nicht zur Breite des Objekts.

Wenn zwei Elemente nebeneinander liegen, können die Ränder zusammenfallen, was in Ordnung ist, da sie nicht wirklich Teil des Objekts sind.

3
paulmorriss

Die Aufteilung ist also:

Der Rand wird in der Frage nicht mitgezählt, da er nichts Sichtbares zum Element beiträgt (was ich der Unbestimmtheit der Frage selbst anschlage).

Außerdem wird das Auffüllen in der sichtbaren Breite mitgezählt , was ich in all den Jahren irgendwie nicht geschafft habe. Dummes Box-Modell.

Wenn ein Hintergrund angewendet wird, ist die sichtbare Breite daher: 10px (linker Abstand) + 100px (Breite) + 10px (rechter Abstand) = 120px.

Hier ist ein Beispiel für diese Situation: jsfiddle.net/tchalvakspam/XC2Br

1
Kzqai