width:100% vs. width:inherit

My understanding is that width: 100% lets the element's width be the same as its parent's, whereas width: inherit does that only when the parent's width is explicitly specified. Is this understanding correct?

If so, it looks to me that when width: inherit works, then width: 100% would always work, so you could always use the latter. Then, what is the purpose of writing width: inherit? When does it become useful?

If my understanding is wrong, what is the difference between the two?

Similarly with height.

html
css

85529 次浏览

小开

最佳答案

See jsfiddle http://jsfiddle.net/bt5nj/2/ and http://jsfiddle.net/bt5nj/3/

width:inherit inherits width that defined by parent.

HTML:

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

CSS:

  #parent {
width:50%;
height:30px;
}


#child {
width:inherit;
height:100%;
background-color:red;
}

This makes child width 25%, but if I redefine it with width:100% it will define width of child 50%.