CSS box model: width and height
Examine the CSS source code for details on using padding and border properties.
Block Tags
Block elements are 100% width by default.
CSS precentages with width refer to the available space, as determined by the parent container.
Default Width is 100% of the available space
Percentage Width (set to 75%)
Fixed Width (500px;)
Default Height is determined by content, padding, border. Note that this allows tags to adjust height automatically, making for easier to maintain pages.
Fixed Height (100px;)
Percentage Height determined by parent container (200%). Since this tag has no explicitly heighted parent container, height as a percent has no effect.
Fixed Height (100px;)
Percentage Height determined by parent container (100%). Note how it is exactly as tall as the parent, even if overlaping occurs.
Inline Tags
Inline tags will not accept width or height properties. If you need to resize an inline tag, use display:block;
This span tag will not resize as long as it remains an inline tag.
This span tag will not resize as long as it remains an inline tag.