D.9 Size Properties
The two properties in this section allow you to set specific dimensions of your ele-
ments.
height
The h eight CSS property defines the height of the element’s content area. The actual
height of the element can be taller than that specified by the height proper ty since
the actual height also includes both ( top and bottom) vertical pad dings, both vertical
border e dges, and both vertical margins. If you are not familiar with these terms, you
can rea d about the CSS bo x model on page 74.
The auto keyword lets the browser compute and select the most appropr ia te height
for the element.
Note that the actual height of the content area on the screen can show taller than the
set height. That can happen, for example, if there’s too much text inside the content
box or if the user increases the font size. Browsers don’t all handle th is situation in the
same way. Some will increase the height of the content box while others will simply
overflow text outside of the box.
Values
Nonnegative <length> and <percentage> values can be used. When percentages are
used, they are relative to th e height of the containing block. Note that percenta ges
may not have an effect if the contain ing element’s height property is set to auto.
auto
Default Value
auto
Example
height: 200px;
width
The width CSS property defines the width of the element’s content area. Note that
the actual width of the element can be wid er since it also includes the widths of both
(left and right) horizontal pa ddings, both horizontal border edges, and both h orizontal
margins. If you are not familiar with these terms, you can r ead a bout the CSS box
model on page 74.
The a uto keyword lets the browser compu te and select the most appropr ia te w idth for
the element.
360 CSS Reference
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.