The width property is used to specify the width of the
content-area of block-level elements, inline replaced elements and other elements to
which the declarations display:block or display:inline-block
have been applied.
By default, the width of an element is dependant on the width of the viewport of the web browser window.
Its initial value is auto. It is not an inherited property. It
can take length values, percentages and the keywords auto and
inherit. Percentage values refer to the width of the containing block
element. Negative values are not allowed.
width with px values
In the example below the width property is applied to a
block-level element.
Example 1: <p style="font-size:35px;font-family:'Times New
Roman';width:300px">the quick brown fox jumps over the
lazy dog. the five boxing wizards jump quickly</p>
The width property cannot be applied to inline-level
non-replaced elements. However, it can be applied to inline-level replaced
elements such as img.
Example 2: <p style="font-size:35px;font-family:'Times New Roman';">the <img src="20x50.jpg"
alt="20x50.jpg">quick <img style="width:50px"
src="20x50.jpg" alt="20x50.jpg"> lazy dog.</p>
In the above example, note how the second image is scaled proportionally so that the width is 50px. In Firefox 3, Firefox 3.5 and Internet Explorer 8, the resized image is also anti-aliased. However, in Internet Explorer 6 and Internet Explorer 7, the image is not anti-aliased.
width with percentage values
With the width property, percentage values refer to the
width of the containing element. All the displayed elements of a web page have
the body element as an ancestor. Therefore, if an element has no
other parent, then percentage widths will refer to the width of the body
element. The default width of the body element is equal to the width of the viewport
excluding any padding and margins of the html element.
Example 3: <div style="font-size:35px;font-family:'Times New
Roman';width:750px;background-color:purple"><p
style="width: 75%">the quick brown fox jumps over the lazy dog. the
five boxing wizards jump quickly.</p></div>
In the above example, the width of the <p> is 75% of the
width of the parent element (750px). This computes to 562.5px, which rounds off
to 563px.
width with em values
em values values refer to
the font size of the element.
Example 4: <p style="font-size:35px;font-family:'Times New
Roman';width:14.29em">the quick brown fox jumps over the lazy dog. the five
boxing wizards jump quickly.</p>
In the above example, the width of the <p> is 14.29*35px =
500.15px
width:auto
Since auto is the initial value of width, the width:auto
declaration is only useful to override another width declaration that has been
applied to an element.
width:inherit
width is not an inherited property. However, the
width:inherit declaration can be used in order that an element inherits
the width declaration of its parent.
Internet Explorer 6 and Internet Explorer 7 ignore the width:inherit
declaration.
Concluding Notes
In Firefox 3, Firefox 3.5, Internet Explorer 7 and Internet Explorer 8, when
the width of the content area + padding + margins of an element is more than the specified
width of its containing element, the element overflows out of the content area
of the containing element. However, in Internet Explorer 6 the width of the
containing element is increased to accomodate the child element without
overflowing. That is, Internet Explorer 6 treats the width
declaration as the minimum width of an element. This is a bug.
Internet Explorer 6 and Internet Explorer 7 ignore the width:inherit
declaration. Therefore, this declaration must be avoided.
No comments:
Post a Comment