: "Effective width" of a css element could reasonably includes what? width, ?margin?, ?padding? Eric Meyer just tweeted that he got 100% in this quiz: http://net.tutsplus.com/quizzes/nettuts-quiz-1-beginner-css/

@Alves908

So the breakdown is thus:

The margin isn't being counted in the question since it wouldn't contribute anything visible to the element (which I chalk up to the vagueness of the question itself).

In addition, padding is counted in the visible width, which I have somehow managed to not get over all these years. Stupid box model.

As a result, the visible width if a background is applied would be:
10px (left padding) + 100px (width) + 10px (right padding) = 120px.

Here is a jsfiddle of that situation:
jsfiddle.net/tchalvakspam/XC2Br

Vote Up Vote Down

@Candy875

Padding is space inside the object, margin is space outside the object. The width property is how wide the stuff inside the container is. As the effective width here means how much space the object takes up the margin doesn't count towards the width of the object.

If two elements are next to each other the margins may collapse, which is fine because they aren't really part of the object.

Vote Up Vote Down