HTML and CSS Reference
In-Depth Information
■
min-width
: The minimum width of an element
■
max-width
: The maximum width of an element
■
min-height
: The minimum height of an element
■
max-height
: The maximum height of an element
When nesting HTML elements, the inner element's box is drawn inside
the content area of the outer element. This results in an assortment of
ways you can combine the properties to achieve the same visual effect or
whitespace. As you nest elements, you compound the buildup of proper-
ties along the elements at the edge of these boxes.
To create the simple illustration shown in
Figure 5.2
from the nested
elements
<div><div></div></div>
, you have a number of possibilities
as to how you split the 100-pixel gray area between the outer element
border area and the inner element's content area. That 100 pixels can be
split however you'd like between the adjacent padding-margin-border
area. Depending on that choice, it may be possible to create the 50-pixel
inner white area with the inside border padding.
Figure 5.2
Content area
surrounded
by 50 pixels of
white and then
surrounded by
100 pixels of gray.