Size and Clipping
An elementâs size is controlled through a set of six CSS attributes. The first two,
width
and height
, are the most common and are used to
set the absolute width and height of the element. The other
fourâmin-height
, min-width
, max-height
, max-width
âare handy CSS attributes
(particularly when working with images), but not commonly used in
dynamic effects.
Tip
Actually, an elementâs width
and height
are factors of several
attributes, including the elementâs border
, margin
, padding
, and content
. All combined, these provide a CSS
âbox modelâ associated with block elementsâelements that force a line
break before and after. Read more on the box model at the W3C page,
âBox model,â at http://www.w3.org/TR/REC-CSS2/box.htm.
If the elementâs contents are too large for the element, the
overflow is managed through the CSS overflow
attribute, which can be set to
visible
(render all of the content
and overflow the element boundaries); hidden
(clip the content); scroll
(clip the content, and scrollbars are
provided); and auto
(clip and provide
scrollbars only if some of the content is hidden).
Tip
Why even set the elementâs height? After all, if the height is
not defined, and the overflow not set to clip
, the element automatically resizes to
fit the content.
If you have content in two columns, laid out side by side, you might want to set the heights of the columns so that one isnât excessively longer than the other.
Overflow and Dynamic Content
When an elementâs ...
Get Learning JavaScript now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.