HTML and CSS Reference
In-Depth Information
values compute the width to be a percentage of the width of the con-
taining element. For example:
img {width: 100px}
displays the image referenced by the
<img>
tag scaled to 100 pixels
wide.
When scaling elements to a specific width, the aspect ratio of the object
is preserved if the
height
property of the tag is set to
auto
. Thus:
img {width: 100px; height: auto}
makes all the images 100 pixels wide and scales their heights appropri-
ately. [
The height property, 8.4.7.10
]
If you want to constrain the width of an element to a range rather than
a specific value, use the
min-width
and
max-width
properties. These prop-
erties accept values like the
width
property and establish a range for the
width of the element. The browser then adjusts the width of the element
to fall within the desired range.
The
width
property interacts with the
margin-left
and
margin-right
prop-
erties to determine the total width of an element, as described earlier in
section 8.4.7.1
.
8.4.7.17. The z-index property
In addition to the x and y positions of an element within the browser
window or on the printed page, each element has a vertical, or z, po-
sition. Elements with higher z positions are "closer" to the viewer and
obscure elements underneath them.
