Elements of Style - HTML Manual of Style - page 152

HTML inline elements also can have box properties as a consequence of their
participation in lines of the content low, as we saw with respect to setting the
line-height and vertical-align properties. he box properties discussed in
this section are height , width , margin , padding , and border .
HEiGHT ANd WidTH
he height and width properties of a block element are the dimensions of the
rectangle the element's content occupies. Width and height speciications are
ignored for inline elements. However, you can change the apparent height
of an inline element by adding or subtracting leading with the line-height
property.
he area that the element takes up on the page is usually larger than the
speciied height and width property values because it includes the padding,
border, and margin amounts. his is important to remember when working
with background images, which extend into the padding and under the ele-
ment's border, as shown in Figure 3.8 earlier in the chapter.
Both the width and height properties can be given values using a length and
units designator. Negative values, however, are not allowed. he two properties
can also have the keyword values auto and inherit . auto is the default value.
For height, auto means to compute a height suicient to contain the content as
currently lowed. Element height is, in a sense, conserved. he computed value
is the minimum required. In most instances it is counterproductive to set
an element's height to a speciic value unless the heights of all child elements
are known. Among the exceptions are table elements and labels matched to
backgrounds.
In contrast, an element's width is not constrained. he computed value is
the largest value that will it the element with its margins, padding, and bor-
ders within the width of the parent element. It is for this reason that you must
specify widths when working with loating elements:
#col1,#col2 { width: 48%; float: left; }
ul.nav li { height: 1.4em; }
As a general rule, web authors should set an element's width when it is
necessary to make the element narrower than it would normally be. Web
authors also should set an element's height when it's necessary to make the
element taller than normal. If more precise control is needed, the author can
use the min-height , min-width , max-height , and max-width properties, which are
recognized by most modern browsers. As you might expect, these properties
set constraints on the browser's computed widths and heights.