Box Model and Border Question

[Smeagel13]

<div class="parent">
    <div class="child"></div>
</div>

/* Final Width: 200px */
div.parent {
    width: 200px;
}

/* Final Width: 202px (with border) */
div.child {
    width: 100%;
    border: 1px solid #000000;
}

/* Final Width: 200px (with border) */
div.child {
    /* Width Inherited -- Assumed as 200px? */
    border: 1px solid #000000;
}

Why is it that works the way it does, when you would think it wouldn't, is it standard or specific to browser implementation?

[AleMonteiro]

To my knowlodge, when you don't specify the width to 100% (last case) the browser takes care to make the child 100% of it's parent, including border and padding.

When you do specify width 100% (second case) you are saying that only the width must have 100%, without border and padding. So in the end the width will be the 100% of the parent plus border and padding.

And I think those implementaions depend on the browser.

Check those links to futher understanding:
http://www.w3schools.com/css/css_boxmodel.asp

http://www.daniweb.com/web-development/web-design-html-and-css/threads/442058/how-can-i-stretch-my-nav-bar-to-fit-width-of-browser-wothout-scroll-bar

http://css-tricks.com/the-css-box-model/

[JorgeM]

With regard to the width property, the default value is "auto". The browser then calculates the width. Browsers that follow the CSS specification should handle it in the same manner.

http://www.w3.org/TR/CSS21/visudet.html#the-width-property

[Smeagel13]

Thanks @AleMonteiro, the last link explained it perfectly, well it stated what you said too:

If you don't declare a width, and the box has static or relative positioning, the width will remain 100% in width and the padding and border will push inwards instead of outward. But if you explicitly set the width of the box to be 100%, the padding will push the box outward as normal.

Learn something new everyday...