100% frente a heredar

Question

Según entiendo, width: '100%' permite que el ancho del objeto sea el mismo que el de sus padres, mientras que width: inherit lo hace solo cuando el ancho de los padres está explícitamente especificado. ¿Es este entendimiento correcto?

Si es así, me parece que cuando width: inherit funciona, entonces width: '100%' siempre funcionará, por lo que siempre puede usar este último. Entonces, ¿cuál es el propósito de escribir width: inherit? ¿Cuándo se vuelve útil?

Si mi entendimiento es incorrecto, ¿cuál es la diferencia entre los dos?

De forma similar con height.

Answer 1

Ver jsFiddle http://jsfiddle.net/bt5nj/2/ y http://jsfiddle.net/bt5nj/3/

width:inherit hereda anchura que se define por padre.

HTML:

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

CSS:

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

Esto hace child anchura 25%, pero si redefino con width:100% definirá anchura de child 50%.