Display: block & width and height?

Hello,


span {
display: block;
width: 100%;
height: 100%;
}

Are width and height settings redundant, as in “already implied by display:block;” or do they affect the element?

:slight_smile:

The width is basically redundant but the height may not be. A block element only expands to its parent’s width but not to the parents height.

However 100% height would mean the span is as high as a parent that has a height defined. If the parent is 100px tall then the span with a height of 100% will also be 100px tall. Of course that means content in excess of 100px will overflow. If the parents height is auto or defined by content then the height:100% collapses to auto which is the default so should be removed anyway.

It is unlikely that you want a height on the element anyway so just the display:block will do.

If the element is holding complicated floated content or is used as a stacking context for absolute elements then the element will need haslayout in IE8 and under which can be done by using the width:100% as a trigger or by using the proprietary zoom:1.0 instead.

width:100% is implied by display:block, so there is no need to do that.

height:100% is not implied by display:block (that’s the default display mode for, eg, <div>, <p>, <h1> and plenty or more, so by that logic, every heading, paragraph and section would stretch to fill the entire height of the page!)