4

Eric Meyer just tweeted that he got 100% in this quiz:

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

So I took the quiz, and at the end they told me that I got one question wrong:

What’s the effective width of the container? #container {width: 100px; padding: 10px; margin: 20px;}

To which I answered: 20px + 100px + 20px = 140px

After a lot of work, I unraveled that the quiz's suggested "correct" answer was 120px.

Could someone explain why 120px would be a more appropriate answer?

Edit: Created a jsfiddle of the situation, and it appears that (for example) inline-block elements with padding incorporate the padding into the width, which I somehow managed to go all this time without realizing.

Improve this question
1
  • I would suggest the effective width is 160px: 100 in width, 10 on each side in padding, 20 on each side in margin, makes 100+20+40=160.
    – DisgruntledGoat
    Commented Jun 8, 2011 at 13:49

2 Answers 2

Reset to default
3

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.

Improve this answer
2
  • Right, I guess I should have taken into account that the margin isn't going to add any content, and could be shared between two side-by-side objects. But in that case, shouldn't the observable width then be 100px? 10px of padding inside the container + 80px of actual content, plus 10px of padding on the other side? I don't see how 120px becomes valid.
    – Kzqai
    Commented Jun 7, 2011 at 16:14
  • 1
    I guess I was wrong, the padding does count towards the width, I suppose I jus' don't get the box-model, or something: jsfiddle.net/tchalvakspam/XC2Br I had thought that padding pushed the content away from the sides, but didn't change the overall width.
    – Kzqai
    Commented Jun 7, 2011 at 16:17
1

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

Improve this answer
1
  • Sounds good to me. I agree the question is vague.
    – paulmorriss
    Commented Jun 8, 2011 at 8:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.