HTML and CSS Reference
In-Depth Information
img {height: 100px}
tells the browser to display the image referenced by the
<img>
tag scaled
so that it is 100 pixels tall. If you use a relative value, the base size to
which it is relative is browser and tag dependent.
When scaling elements to a specific height, you can preserve the aspect
ratio of the object by also setting the
width
property of the tag to
auto
.
Thus:
img {height: 100px; width: auto}
ensures that the images are always 100 pixels tall, with an appropriately
scaled width. [
The width property, 8.4.7.16
]
If you want to constrain the height of an element to a range rather than
a specific value, use the
min-height
and
max-height
properties. These
properties accept values like the
height
property and establish a range
for the height of the element. The browser then adjusts the height of
the element to fall within the desired range.
All of the popular browsers fully support the
height
property, but none
of the browsers yet supports the
min-height
and
max-height
properties.
8.4.7.11. The margin properties
Like the border properties, the various margin properties let you control
the margin space around an element, just outside of its border (see
Fig-
ure 8-14
). Margins are always transparent, allowing the background col-
or or image of the containing element to show through. As a result, you
can specify only the size of a margin; it has no color or rendered style.
The
margin-left, margin-right, margin-top
, and
margin-bottom
proper-
ties all accept a length or percentage value indicating the amount of
