100% против наследования

Я понимаю, что width: '100%' позволяет ширине объекта быть такой же, как и его родительская, тогда как width: inherit делает это только в том случае, если явно указана ширина родительского элемента. Правильно ли это понимание?

Если это так, мне кажется, что когда width: inherit работает, тогда width: '100%' всегда будет работать, поэтому вы всегда можете использовать последнее. Тогда, какова цель написания width: inherit? Когда это станет полезным?

Если мое понимание неверно, в чем разница между этими двумя?

Аналогично height.

ОТВЕТЫ

Ответ 1

См. jsfiddle http://jsfiddle.net/bt5nj/2/ и http://jsfiddle.net/bt5nj/3/

width:inherit наследует ширину, определяемую родительским.

HTML:

<div id="parent">
<div id="child"></div>
</div>​

CSS

#parent
{
    width:50%;
    height:30px;
}
#child
{
    width:inherit;
    height:100%;
    background-color:red;
}

Это делает ширину child шириной 25%, но если я переопределю ее с помощью width:100%, она будет определять ширину child 50%.