Thursday, February 18, 2010

The height Property

The height property is used to specify the height 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 height of an element is just enough to accommodate all its descendant elements.

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 height of the containing block element. Negative values are not allowed.

height with px values

In the example below the height property is applied to a block-level element.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';height:500px">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly.</p>

The height 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="height:100px" src="20x50.jpg" alt="20x50.jpg"> lazy dog.</p>

In the above example, the image is resized proportionally to 40 pixels by 100 pixels. In Firefox 3, Firefox 3.5 and Internet Explorer 8, the image is anti-aliased. However, in Internet Explorer 6 and Internet Explorer 7 the image is not anti-aliased.

height with percentage values

With the height property, percentage values refer to the height of the containing element. If the parent element does not have it's height declared with a length or percentage value, then the percentage height declaration of the child element is ignored. The reason for this is, since, by default, an element is just tall enough to contain its descendant elements, if the height of a descendant element was in turn dependent on the height of the parent element, it would be an infinite loop.

Example 3: <div style="height:400px;background-color:purple"><p style="font-size:35px;font-family:'Times New Roman';height: 75%">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly.</p></div>

In the above example, the height of the <p> will be 75% of 400px, which is 300px.

Example 4: <div style="height:400px;background-color:purple"><div><p style="font-size:35px;font-family:'Times New Roman';height:75%">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly.</p></div></div>

In the above example, since the <p>'s parent element does not have a percentage or px height declaration, the height declaration on the <p> has no effect. However, Internet Explorer 6 and Internet Explorer 7, due to a bug, render the <p> with a height of 300px. This buggy behavior can be fixed by triggering Internet Explorer 6 and 7's hasLayout property on the <p>'s parent div. One way of doing this is by using the Internet Explorer-only declaration zoom:1 on the div.

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';height:7.15em">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly.</p>

In the above example, the height of the <p> is 7.15*35px = 250.25px

height:auto

Since auto is the initial value of height, the height:auto declaration is only useful to override another height declaration that has been applied to an element.

height:inherit

height is not an inherited property. However, the height:inherit declaration can be used in order that an element inherits the height declaration of its parent.

Internet Explorer 6 and Internet Explorer 7 ignore the height:inherit declaration.

Concluding Notes

Unlike the width property, with height, percentage-value declarations are ignored if the parent element does not have a percentage or px height declaration, even if an ancestor element does.

In Firefox 3, Firefox 3.5, Internet Explorer 7 and Internet Explorer 8, when the height of the content area + padding + margins of an element is more than the specified height of its containing element, the element overflows out of the content area of the containing element. However, in Internet Explorer 6 the height of the containing element is increased to accommodate the height of the child element without overflowing. That is, Internet Explorer 6 treats the height declaration as the minimum height of an element. This is a bug.

In Internet Explorer 7, when the content area of an element overflows its containing block, unlike other browsers, the element's background image or color covers the elements that follow. This can be fixed by using the Internet Explorer-only declaration zoom:1 on the elements that follow the containing block.

Internet Explorer 6 and Internet Explorer 7 ignore the height:inherit declaration. Therefore, this declaration must be avoided.

Internet Explorer 6 and Internet Explorer 7 sometimes render elements in unexpected ways when using the height property. This can often be fixed by using the Internet Explorer-only declaration zoom:1 on the containing element.

The width Property

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.

The color Property

The color property specifies the foreground color of an element. The foreground color applies to text. It also applies to borders when there is no border-color declaration.

The color property can take, as values, color keywords, system color keywords, hexadecimal color notation, decimal functional rgb notation, percentage functional rgb notation and the keyword inherit.

color with Color Keywords

For a list of color keywords, see Specifying Color in CSS. Below is an example that uses a CSS 2.1 color keyword.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';color:aqua">the quick brown fox jumps over the lazy dog</p>

Below is an example that uses a CSS 3 color keyword.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';color:crimson">the quick brown fox jumps over the lazy dog</p>

color with System Color Keywords

To mimic the appearance of the viewer's operating system's GUI, the colors of text elements need to match the viewers OS. For this, system color keywords can be used. see Specifying Color in CSS for more info. Below is an example.

Example 3: <p style="font-size:35px;font-family:'Times New Roman';color:WindowText">the quick brown fox jumps over the lazy dog</p>

color with Functional rgb Values

The color property can have a value specifying a color in the decimal functional rgb notation.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';color:rgb(255,105,180)">the quick brown fox jumps over the lazy dog</p>

The color can also be specified in the percentage functional rgb notation.

Example 5: <p style="font-size:35px;font-family:'Times New Roman';color:rgb(100%,49.8%,31.3%)">coral the quick brown fox jumps over the lazy dog</p>

In the above example, the color value can also be expressed as rgb(255, 127,80)

color with Hexadecimal Notation

The values of red, green and blue can be specified as hexadecimal numbers in a color declaration. The value consists of a pound symbol (#) followed by the hexadecimal values of red, green and blue. There are no spaces.

Example 6: <p style="font-size:35px;font-family:'Times New Roman';color:#FF7F50">coral the quick brown fox jumps over the lazy dog</p>

In the above example, the color in decimal rgb notation is rgb(255,127,80).

A hexadecimal notation value can be shortened if the value of each primary color consists of a repeated number or letter.

Example 7: <p style="font-size:35px;font-family:'Times New Roman';color:#AD9"> the quick brown fox jumps over the lazy dog</p>

In the above example, the color value can be expanded to #AADD99 which is equivalent to rgb(170,221,153).

color with inherit

Since color is an inherited property, the only use of the color:inherit declaration is to override another CSS color declaration on an element. Internet Explorer 6 and Internet Explorer 7 ignore the color:inherit declaration.

Tuesday, February 16, 2010

The Border Properties

The border of an element is one or more lines that surround the padding of an element. If there is no padding then the border surrounds the content area of the element. Borders are drawn over any background color or background image that the element has.

CSS allows specifying the top, right, bottom and left borders of an element individually. The table below shows all the CSS border properties:

border border-width border-style border-color
border-top border-top-width border-top-style border-top-color
border-right border-right-width border-right-style border-right-color
border-bottom border-bottom-width border-bottom-style border-bottom-color
border-left border-left-width border-left-style border-left-style

The border property is the most general CSS border property. With this property, the border-width, border-style and border-color can be specified as space separated values. It can also take the single keyword inherit.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';border:inset 9px lime">the quick brown fox jumps over the lazy dog</p>

In the above example, the border-width is 9px, the border-style is inset, and the border-color is lime. The order in which the values are specified is not important.

The properties border-width, border-style and border-color specify a border's width, the kind of border and the color of the border, respectively. When these properties have a single value, that value applies to all the four borders of an element. However, each of these properties can also have up to four space-separated values that allow specifying the properties of the top, right, bottom and left borders individually. When only two values are specified, the first value refers to the top and bottom borders and the second value refers to the right and left borders. When three values are specified, the first value refers to the top border, the second value to the right and left borders, and the third value refers to the bottom border.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';border-width:5px;border-style:dashed dotted double groove">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

 

The properties border-top, border-right, border-bottom, and border-left specify the width, style and color of the border of each side of an element individually.

Example 3: <p style="font-size:35px;font-family:'Times New Roman';border-top:dotted 8px blue">the quick brown fox jumps over the lazy dog</p>

 

Percentage values are not allowed with any of the border properties. For specifying border width, em values are allowed and refer to the font size of the element that matches the CSS declaration. None of the border properties are inherited. The border properties can be applied to any element.

The most specific border properties are border-top-width, border-right-width, border-bottom-width, border-left-width, border-top-color, border-right-color, border-bottom-color, border-left-style,

The properties border-top-style, border-right-style, border-bottom-style, and border-left-style, can be used to apply a specific border style to a single side of an element. These properties have the initial value none. Therefore, no borders appear on an element unless it has a border style declaration.

Borders are drawn outside the content area of an element, surrounding the padding. However, any background image or background color of the element also appears under the border. In Internet Explorer 6 and Internet Explorer 7 when an element has hasLayout the, background of the element is not rendered under the border. This is a bug.

The border-width Property

The border-width property can have, as values, the keywords thin, medium, thick and inherit, or length values. It can have up to four space-separated values, which allows setting the border width of each side of an element individually. There is no initial value. The width of individual borders can also be set using the properties border-top-width, border-right-width, border-bottom-width and border-left-width. These properties have the initial value medium.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';border-style:solid;border-width:5px 2px 8px 10px;border-color:blue">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

border-width:thin results in a 1px border, border-width:medium results in a 3px border, border-width:thick results in a 5px border. However in Internet Explorer 6 and Internet Explorer 7, the widths are 2px, 4px and 6px respectively.

When an inline non-replaced element (such as a span) has top and bottom borders, the height of the content area of the parent element does not increase to accommodate large borders. Large top and bottom borders overflow the content area of the parent element. However, the left and right borders take up horizontal space on a line and therefore never overlap any characters (including spaces) that appear to the left or right of them.

Large top borders on inline non-replaced elements may cover text that is vertically above it. Large bottom borders on inline non-replaced elements may be overlapped by text that is vertically below it. This can be seen in the example below.

Example 5: <p style="font-size:35px;font-family:'Times New Roman';">the five boxing wizards jump quickly. the quick brown <span style="border-width:15px;border-style:solid;border-color:lime">fox</span> jumps over the lazy dog. the five boxing wizards jump quickly</p>

When an inline replaced element (such as an image) has top a large top border, the content area of the containing block element expands to accommodate it. The edge of the bottom border will be on the baseline of the parent element. Just like on inline non-replaced elements, left and right borders take up horizontal space on a line and therefore never overlap any characters (including spaces) that appear to the left or right of them.

Example 6: <p style="font-size:35px;font-family:'Times New Roman';">the five boxing w<img src="20x50.jpg" alt="20x50.jpg" style="border-width:15px;border-style:dashed;border-color:lime">izards jump quickly</p>

When there is insufficient space for a border, it overflows the content area of the containing element. When a border overflows the viewport, the browsers inserts a horizontal scrollbar to view it. On elements with unmodified positioning, only bottom and right borders can overflow.

Example 7: <div style="font-size:35px;font-family:'Times New Roman';height:140px;width:300px;border-width:3px;border-style:dashed;border-color:aqua"> <p style="height:135px;width:295px;border-width:3px;border-style:dashed;border-color:blue">the quick brown fox jumps over the lazy dog</p> </div>

border-top-width, border-right-width, border-bottom-width, and border-left-width

Using these properties, different border widths can be specified for each side of an element's border.

Example: <p style="font-size:35px;font-family:'Times New Roman';border-style:solid;border-top-width:5px;border-right-width:2px;border-bottom-width:8px;border-left-width:10px;border-color:blue">the quick brown fox jumps over the lazy dog.</p>

The same effect can also be obtained using the border-width shorthand property with four space-separated values.

Example: <p style="font-size:35px;font-family:'Times New Roman';border-style:solid;border-width:5px 2px 8px 10px;;border-color:blue">the quick brown fox jumps over the lazy dog.</p>

The border-style Property

The border-style property can have, as values, the keywords none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, and inherit. There is no initial value. It can have upto four space-separated values, which allows setting the style of each side of an element individually. The style of individual borders can also be set using border-top-style, border-right-style, border-bottom-style, border-left-style. The initial value of these properties is none.

border-style:solid

border-style:solid creates a border that consists of a straight line that does not have any gaps or decoration.

Example 8: <p style="font-size:35px;font-family:'Times New Roman';border-width:5px;border-style:solid">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

border-style:dashed

border-style:dashed creates a border consisting of a straight line with gaps at regular intervals.

Example 9: <p style="font-size:35px;font-family:'Times New Roman';border-width:5px;border-style:dashed">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

 

The above screenshot was taken in Firefox. In Internet Explorer (6, 7 and 8), the appearance of the border is slightly different — the width of the gaps and the intervals at which they appear is different.

The gap-width and gap-interval depends on the width of the border. In Firefox, the gap-width and the gap-interval is the three times the border-width. Therefore, in the above example, the gap-width and the gap-interval of the border is 15px. In Internet Explorer, the gap-width is equal to the width of the border and the gap-interval is twice the width of the border. Therefore, in the above example, the gap-width is 5px and the gap-interval is 10px.

border-style:dotted

border-style:dotted creates a dotted border. In Firefox, each dot is an anti-aliased square whose side is equal to the width declaration of the border. In Internet Explorer, each dot is approximately diamond shaped, without anti-aliasing and has a height and width is equal to the width declaration of the border. The space between the dots is equal to the width declaration of the border.

Internet Explorer 6 renders a 1px dotted border like a 2px dashed border. This is a bug.

Firefox puts a pointed angle at each corner of an element with a dotted border.

Example 10: <p style="font-size:35px;font-family:'Times New Roman';border-width:5px;border-style:dotted">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

border-style:double

border-style:double creates two thin sub-borders separated by a gap. The sum of the widths of each sub-border and the gap in between is equal to the specified border width.

In Firefox the two sub-borders are always of the same width. In Internet Explorer the width of the sub-borders may be different. The minimum border width necessary for a double border is 3px. In that case, the width of each sub-border and the in-between gap will be 1px.

Example 11: <p style="font-size:35px;font-family:'Times New Roman';border-width:7px;border-style:dotted;border-color:blue">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

  
border-style:groove

border-style:groove creates a border that has the appeareance of a groove. The browser achieves this by creating a kind of double border that has lines of two colors — one in the same color as the foreground color or the color specified in the border-color declaration and the other line of a lighter shade. The inner and outer colors are flipped in each right angle.

Notes: Internet Explorer 6 and Internet Explorer 7 do not render the groove border in the foreground color (when there is no border-color declaration). This is a bug. The shades of the colors of  a groove border differs between Internet Explorer 8 and Firefox.

The minimum width of a groove border is 2px. At 1px a groove border is rendered as a 1px solid line.

Example 12: <p style="font-size:35px;font-family:'Times New Roman';border-width:8px;border-style:groove">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

border-style:ridge

border-style:ridge creates a border similar to a groove border, but with the colors of each right angle flipped. This is supposed to give the border the appearance of being raised.

border-style:inset

border-style:inset creates a border that is supposed to give the box of the element the appeareance of being embedded in the page. Firefox creasts a border consisting of two colors — one is the foreground color or in the color specified by the border-color declaration and the other is a lighter shade. Internet Explorer 6, 7 and 8 create a border having four colors — the top right angle consisting of two dark shades and the bottom right angle consisting of two lighter shades. The shades are darker in Internet Explorer 8 compared to Internet Explorer 6 and 7.

Note: Internet Explorer 6 and Internet Explorer 7 do not render inset borders in the foreground color (when there is no border-color declaration). This is a bug.

Example 13: <p style="font-size:35px;font-family:'Times New Roman';border-width:8px;border-style:inset">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

border-style:outset

border-style:outset creates a border that is supposed to give the box of the element the appeareance of being raised on the page. Firefox creasts a border consisting of two colors — one is the foreground color or in the color specified by the border-color declaration and the other is a lighter shade. Internet Explorer 6, 7 and 8 create a border having four colors — the bottom right angle consisting of two dark shades and the toop right angle consisting of two lighter shades. The shades are darker in Internet Explorer 8 compared to Internet Explorer 6 and 7.

Note: Internet Explorer 6 and Internet Explorer 7 do not render outset borders in the foreground color (when there is no border-color declaration). This is a bug.

border-style:outset creates a border similar to border-style:inset but with the color of the right angles flipped.

border-style:hidden and border-style:none

These declarations prevent the border from being rendered. No space is allocated to them either. In a table cell with border-style:none, a border might still appear because of border declarations on adjoining cells. However, if a table cell has the declaration border-style:hidden, then no borders are rendered on it, not even the borders of adjoining cells.

Example 14: <p style="font-size:35px;font-family:'Times New Roman';border-width:20px;border-style:none">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

border-style:inherit

The border-style:inherit declaration causes an element to inherit its parent element's border style. Internet Explorer 6 and Internet Explorer 7 ignore this declaration.

border-top-style, border-right-style, border-bottom-style and border-left-style

Using these properties, different border styles can be specified for each side of an element's border.

Example 15: <p style="font-size:35px;font-family:'Times New Roman';border-width:5px;border-top-style:dashed; border-right-style:dotted;border-bottom-style:double;border-left-style:groove">the quick brown fox jumps over the lazy dog</p>

The same effect can also be achieved using a border-style declaration with four values.

Example 16: <p style="font-size:35px;font-family:'Times New Roman';border-width:5px;border-style:dashed dotted double groove">the quick brown fox jumps over the lazy dog</p>

The border-color Property

border-color specified the color of the border. When there is no border-color declaration, borders are rendered in the foreground color. If there is both a border-color and a color declaration, the border is rendered in the color specified by border-color.

border-color:transparent

border-color:transparent causes a border to be transparent. Therefore, the border occupies space but is not visible. Internet Explorer 6 ignores this declaration. This is a bug.

Example 17: <p style="font-size:35px;font-family:'Times New Roman';border-style:solid;border-width:20px;border-color:transparent">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

border-color:inherit

The border-color:inherit causes an element's border to inherit the border color of its parent element. Internet Explorer 6 and 7 ignore the border-color:inherit declaration. In Internet Explorer 8, the border color is only inherited if the parent element has a border-color declaration.

border-left-color, border-top-color, border-right-color and border-bottom-color

Using these properties, colors of each border can be specified individually. When borders of two different colors meet at a corner, each border ends with a 45 degree angle as shown in the figure below.

Example 18: <p style="font-size:35px;font-family:'Times New Roman';border-style:solid;border-width:5px;border-top-color:aqua; border-right-color:fuchsia;border-bottom-color:green;border-left-color:blue">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

 

Individual border colors can also be specified using more than one value in the border-color specification. An example is shown below.

Example: <p style="font-size:35px;font-family:'Times New Roman';border-style:solid;border-width:5px;border-top-color:aqua; border-right-color:fuchsia;border-bottom-color:green;border-left-color:blue">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

Borders on Inline Non-replaced Elements

Borders can be applied to inline non-replaced elements such as spans. The right and left borders of an inline element take up horizontal space on the line and therefore elements on the left and right are moved by the borders. However, no extra vertical space is allocated to the top and bottom borders, this may cause them to overlap other elements.

Example 19: <p style="font-size:35px;font-family:'Times New Roman';">the five boxing wizards jump quickly. the quick brown <span style="border-width:15px;border-style:solid;border-color:lime">fox</span> jumps over the lazy dog. the five boxing wizards jump quickly</p>

  

Borders on Inline Replaced Elements

Borders can be applied to inline replaced elements such as images. The behaviour of borders on inline replaced elements is different from non-replaced inline elements. Unlike non-replaced inline elements, space is allocated for all the borders of an inline replaced element.

In the case of images, the bottom border is aligned to the baseline of the font.

Example 20: <p style="font-size:35px;font-family:'Times New Roman';">the five boxing w<img src="20x50.jpg" alt="20x50.jpg" style="border-width:15px;border-style:dashed;border-color:lime">izards jump quickly</p>

 

The border Property

border is a shorthand property. That is, it allows specifying the values of border-width, border-style, and border-color in a single declaration. Each sub-property can have only one value. Therefore, the border declaration applies to all four sides of an element's border. If, in a border declaration, a particular sub-value is not specified, then the elemen't borders get the initial value. Therfore, not specifying border-style is the same as specifying the value none. Not specifying border-width is the same as specifying the value medium. Not specifying border-color is the same as specifying the value of color of that element.

Example 21: border: cornsilk 20px solid;

The order of the sub-values is not important. Therfore the above declaration is equivalent to border: 20px solid cornsilk.

The Padding Properties

Padding is the spacing surrounding the edge of an element's content area. If the element has a border, then padding comes between the inner edge of the border and the outer edge of the content area. An element's background image or background color, will extend into the padding.

Unlike margins, when the padding of two elements come into contact, they do not collapse.

Padding can be applied to any element. It can accept length values, percentage values and the keyword inherit. Percentage values refer to the width of the containing block. Unlike margins, padding cannot be negative.

There are five padding properties: padding, padding-top, padding-right, padding-bottom and padding-left. The padding property can take up to four space separated values. With four values, the padding lengths specified are the top, right, bottom and left padding, in that order. With three values, the padding lengths specified are top, right and left together, and bottom, in that order. With two values, the padding lengths specified are top and bottom together and the right and left together. With one value, all the sides get the same padding.

padding with px values

Padding can be specified in px as shown in the example below.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';padding:10px;"><span>the quick brown fox</span> jumps over the lazy dog, the five boxing wizards jump quickly</p>

As can be seen in the example above, since is English is a left-to-right language, the space at the end of each sentence may be greater than the padding because when a word does not fit at the end of a line, the browser puts it in the next line. However, the space on the left, top and bottom always remains the same.

When padding overflows an element, it behave the same as content area that has overflowed. Therefore, when padding overflows the viewport, the browser puts a horizontal scroll bar which enables it to be viewed.

padding with percentage values

A padding declaration with percentage values refers to the width of the containing block. Note that even top and bottom padding specified in percentages refer to the width of the containing block.

Example 2: <div style="font-size:35px;font-family:'Times New Roman';width:600px;border-width:5px;border-style:solid;padding:0;margin:0"><p style="padding:10%">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

When an element has an inline element as its parent, percentage padding will depend not on the width of its parent (which is an inline element) but on the width of the ancestor block element.

padding with em values

A padding declaration with em values refers to the font size of the element to which the padding declaration applies.

Example 3: <p style="font-family:'Times New Roman';font-size:20px;padding:2em">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

Padding on Inline Non-Replaced Elements

Padding can be applied to inline non-replaced elements such as spans. Left and right padding on inline non-replaced elements is allocated horizontal space and therefore "pushes" adjacent content away. However, top and bottom padding on inline non-replaced elements is not allocated space and may therefore overlap content above and below an element.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';" >the quick brown fox j<span style="padding:20px">u</span><span style="padding:10px">m</span>ps over the lazy dog</p>

Note that left and right padding on a span (or other inline element) containing more than one line of text appears only at the beginning and end of the span (or inline element).

Padding on Inline Replaced Elements

Padding applied to inline replaced elements such as images behaves differently from padding on inline non-replaced elements. The main difference is that space is allocated to both top and bottom padding and left and right padding. Also, the outer edge of bottom padding will be on the baseline of the element.

Example 5: <p style="font-size:35px;font-family:'Times New Roman';" >the five boxing wizards jump quickly. the quick brown f<img src="20x50.jpg" alt="20x50.jpg" style="background-color:blue;padding:10px">ox jumps over the lazy dog</p>

Specifying padding on individual sides of an element

Padding can be specified individually on an element using the padding-top, padding-right, padding-bottom and padding-left properties and by putting multiple (upto 4) values on a padding declaration.

Example 6: <p style="font-size:35px;font-family:'Times New Roman';padding-top:10px;padding-right:20px;padding-bottom:30px;padding-left:40px">the quick brown fox jumps over the lazy dog. a b c d <span>the five boxing wizards jump quickly</span></p>

The same effect can also be achieved using the shorthand padding property with four values:

Example 7: <p style="font-size:35px;font-family:'Times New Roman';padding: 10px 20px 30px 40px">the quick brown fox jumps over the lazy dog. a b c d <span>the five boxing wizards jump quickly</span></p>

The Margin Properties

The margin is a blank area between elements in which only the background color or image of the parent element (or the nearest ancestor element that has a background color or image) is visible.

The margin property can take up to four length or percentage values, the keyword auto repeated up to four times or the keyword inherit once. Multiple values are separated by spaces.

Example 1: margin:4px 8em auto 10px;

Example 2: margin:inherit;

When a margin declaration has one value, all the four margins — top, right, bottom and left, are set to that value.

When a margin declaration has four values, the first value refers to the top margin, the second refers to the right margin, the third refers to the bottom margin and the fourth refers to the left margin.

When a margin declaration has two values, the first value refers to the top and bottom margins and the second value refers to the right and left margins.

When a margin declaration has three values, the first value refers to the top margin, the second value refers to the right and left margins, and the third value refers to the bottom margin.

Percentage values refer to the width of the containing block element. margin is not an inherited property. It does not have an initial value. The default margins of an element depends on browsers' internal stylesheets.

Margin sizes can also be specified individually using the margin-top, margin-right, margin-bottom and margin-left properties.

Note: Margins of the html element have the same background color or image as the html element. Firefox 3.5, Internet Explorer 7 and Internet Explorer 8 do not render the bottom margin of the the html element. Internet Explorer 6 does not render the borders and margins of the html element correctly. Internet Explorer 7 renders all margins of the html element as solid margins.

margin with px values

In block-level element that does not have padding or borders, having a block-level child element, the height of the parent element will be just enough to contain the borders, padding and content area of the child element. Therefore, the top and bottom margins of the child element will spill out of the parent's content area. This happens because the margin of the child element is in contact with the margin of the parent element. Therefore, the two margins collapse.
However, if the child element's top or bottom margin has the parent element's padding or border adjacent to it, then the margin will be within the content area of the containing block. This is because the two margins are separated by the padding or border.

Example 3: <div style="margin:0;padding:0"><p style="font-size:35px;font-family:'Times New Roman';margin:20px;padding:0">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

In the above example, the top and bottom margins of the <p> are outside the content area div. If the div had top and bottom margins, then the top and bottom margins of the <p> would collapse with the top and bottom margins of the div.

Example 4: <div style="margin:0;padding:0;border-style:solid;border-width:1px"><p style="font-size:35px;font-family:'Times New Roman';margin:20px;padding:0">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

Since the div has a border, the top and bottom margins are within the content area of the div.

Example 5: <div style="margin:0;padding:1px"><p style="font-size:35px;font-family:'Times New Roman';margin:20px;padding:0">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

Since the div has a padding, the top and bottom margins are within the content area of the div.

Over-constrained Margins

Margins are said to be over-constrained when there is not enough space for them in the containing block.

Example 6: <div style="height:200px;border-width:10px;border-style:solid"><p style="font-size:35px;font-family:'Times New Roman';height: 200px;margin:20px">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

In the above example, there is insufficient space for the top and bottom margins. In this situation, the browser renders the top margin within the containing div, and, the content area of the <p> overflows out of the bottom of the div. The bottom margin of  the <p> has no effect on subsequent content. Subsequent elements are rendered on top of the overflowed parts of the <p>.

Example 7: <div style="width:200px;border-width:10px;border-style:solid"><p style="font-size:35px;font-family:'Times New Roman';width:200px;margin:20px">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

In the above example, there is insufficient space for the left and right margins. In this situation, the browser renders the left margin within the containing div, the content area of the <p> and the right margin overflow out of the right of the div.

Left and Right Margins and Viewport Width

Example 8: <body><p style="font-size:35px;font-family:'Times New Roman';width:700px;margin:50px">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></body>

In the above example, the width of the left and right margins are 50px each and the width of the content area of the <p> is 700px. Therefore the minimum width of the viewport required to display the <p> and its margins is 800px. No matter what the width of the viewport, the left margin is always rendered. The right margin, however, behaves as if it has been set to auto. Therefore, if the viewport's width is less than 750px, the browser will put a horizontal scroll bar so that both the left margin and the <p>'s content area can be viewed and the content area of the <p> will overflow the content area of its parent; there will be no right margin. If the viewport's width is greater than 750px but less than 800px, then the left margin and content area will have the specified width, and the remaining space will be taken up by the right margin. If the viewport's width is greater than 800px, the right margin's width will be greater than 50px.

Due to various bugs, the above example renders differently in Internet Explorer 6 — like other browsers, the left margin is always 50px, but unlike other browsers, the right margin is always present and has a minimum width of 50px. If the viewport's width is less than 800px, the browser puts a horizontal scroll bar. Also, the width of the body element is automatically increased by the browser so that the margins and content area of the <p> never overflow.

Due to a rendering bug, Internet Explorer 7, like Internet Explorer 6, always renders the left and right margins along with the <p>'s content area. The difference is, it does not automatically increase the width of the containing element. Therefore, when the width of the viewport is less than 800px, the right margin and, if necessary, the content area of the <p> overflow the body element. The right margins is always 50px or more.

Firefox 3, Firefox 3.5 and Internet Explorer 8 render the above example correctly.

Unconstrained Margins

When the sum of the widths of the left and right margins and the width of the content area is less than the width of the content area of the containing block, the right margin expands to take up the extra space available.

When the sum of the heights of the top and bottom margins and the height of the content area is less than the height of the content area of the containing block, the bottom margin expands to take up the extra space available.

Example 9: <div style="width:600px;height:400px;border-width:1px;border-style:solid"><p style="font-size:35px;font-family:'Times New Roman';height:200px;margin:20px">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

In the above example, the left and top margins are 20px while the right and bottom margins are 180px.

Vertical Collapsing of Margins

When the top or bottom margins of two elements come into contact with each other, the two margins vertically collapse. Therefore, the resulting margin will be the size of the larger margin. If the two margins are equal, then the margins will collapse to the size of a single margin.

Example 10: <p style="font-size:35px;font-family:'Times New Roman';margin:15px">the quick brown fox jumps over the lazy dog.</p>
<p style="font-size:35px;font-family:'Times New Roman';margin:25px">the quick brown fox jumps over the lazy dog.</p>

Left and right margins never collapse — a left and a right margin that are adjacent to each other remain the same size, therefore the total horizontal distance between the elements will be the sum of the margins.

Example 11: <p style="font-size:35px;font-family:'Times New Roman'">the quick brown fox j<span style="margin:20px">u</span><span style="margin:20px">m</span>ps over the lazy dog</p>

In the above example, the distance between the "u" and the "m" will be 40px.

Example 12: <div style="margin:10px;padding:0;background-color:purple"><p style="font-size:35px;font-family:'Times New Roman';margin:20px;padding:0">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

In the above example, the top and bottom margins of the <p> (20px) collapse with the top and bottom margins of the <div>, resulting in a margin of 20px. This is because the top and bottom margins of the <p> are outside the <div> since the <div> has no top and bottom border or padding.

When an element that has no padding or border has a child element that has top or bottom margins, the margins of the child element collapses with the margins of the parent element. However, if there is a border or padding separating two margins, then they do not collapse.

Negative Margins

When a margin declaration has a negative value, and after collapsing the margin with adjacent margins the result is still negative, the content area of the element that the negative margin is applied to will be moved up or the content area of the next element will be moved up, or, the content area of the element will be stretched left or right depending on which margin has the negative value.

Internet Explorer 6 and Internet Explorer 7 do not correctly render negative margins that cause elements to overlap each other or overflow their containing elements. Some of Internet Explorer 7's negative margin bugs can be fixed by triggering hasLayout on the element that has the negative margins.

Negative top and bottom margins

When an element has a negative margin and the adjacent element has a margin that collapses on the negative margin, the resulting margin is the algebraic sum of the two margins.

When an element has a negative top or bottom margin that, after collapsing with adjacent margins (if any) is still negative, the element is moved up (in the case of the top margin) or, the next element's content area is moved up (in the case of the bottom margin).

In Internet Explorer 6, the part of the top or bottom of an element's content area that overflows the boundary of its containing block (which could be the edge of the containing block's content area, the outer edge of the padding or the outer edge of the border), is cut-off or truncated. This bug cannot be fixed by triggering hasLayout.

In Internet Explorer 7, when inside a div, a part of the top or bottom of an element's content area that is next to that element's negative margin is cut-off or truncated. This bug occurs even when the padding of the element's content area does not overflow its containing element. This bug can be fixed by triggering hasLayout on the element that has the negative margin.

Example 13: <p style="font-size:35px;font-family:'Times New Roman';margin-bottom:-10px">the quick brown fox jumps over the lazy dog, the five boxing wizards jump quickly</p> <p style="font-size:35px;font-family:'Times New Roman';margin-left:10px;margin-top:0;">the quick brown fox jumps over the lazy dog, the five boxing wizards jump quickly</p>

In the above example, the first <p> has a negative bottom margin and the <p> after it has a top margin set to 0. Therefore, the content area of the second <p> is moved 10 pixels up. This brings the content area of the second <p> on top of the content area of the first <p>. The background image of the second <p> covers 10 pixels of the background of the first <p>. However, the text of the first <p> is not covered.

Note: Internet Explorer 6, due to a bug, does not render the background image of the second <p> correctly. In Internet Explorer 7, the background image of the second <p> covers the text of the first <p>. This bug cannot be fixed by triggering hasLayout.

Negative left and right margins

When an element has a negative margin and the adjacent element has a margin that collapses on the negative margin, the resulting margin is the algebraic sum of the two margins.

When an element has a negative left or right margin that, after collapsing with adjacent margins (if any) is still negative, the element is extended to the left (in the case of the left margin) or, is extended to the right (in the case of the right margin). The extended portion to the left is outside the viewport cannot be viewed and the extended portion to the right can be viewed by horizontal scrolling.

In Internet Explorer 6, the part of the left or right of an element's content area that overflows the boundary of its containing block (which could be the edge of the containing block's content area, the outer edge of the padding or the outer edge of the border), is cut-off or truncated. This bug cannot be fixed by triggering hasLayout.

In Internet Explorer 7, when inside a div, an element that has a negative right margin will have the portion of the content area that overflows the boundary of the containing element on the right truncated. The boundary of the containing element may be the right edge of the content area, the outer edge of the right padding or the outer edge of the right border. This bug can be fixed by triggering hasLayout on the element that has the negative margin. However, this fix does not work if the containing element does not have padding or borders on the side of the negative margin of the child element.

Example 13: <p style="font-size:35px;font-family:'Times New Roman';margin-right:-50px;margin-left;-50px;padding:0">the quick brown fox jumps over the lazy dog, the five boxing wizards jump quickly</p>

In the above example, since the left margin is -50px, 50px from the beginning of the <p> is cut off because it is supposed to be rendered outside the viewport. Note that the cut off portion cannot be viewed — it is not possible to horizontally scroll to that region. The right margin is -50px, therefore, 50px of the <p> overflows the content area of is the containing element (<body>). If the margin of the containing element is not large enought to contain the overflow, the <p> overflows it. The browser puts a horizontal scroll bar which enables one to scroll to the part of the <p> that is outside the visible part of the viewport.

Note: Internet Explorer 6 always expands the width of the containing element to accomodate the width of a child element. This is a bug. Internet Explorer 7, at certain window widths, renders the above example in the same way as Internet Explorer 6 (incorrectly) but at other widths renders it correctly.

margin Declarations with auto

The keyword auto is useful only when applied to left and right margins. On top and bottom margins, auto results in zero margins. However in Internet Explorer 6 and 7, due to a bug, auto on top and bottom margins do not result in zero margins. Therefore, auto on top and bottom margins must be avoided.

When there is no left and right padding or borders on an element, the sum of the widths of the content area, the left margin, and the right margin will be equal to the width of the content area of the containing block.When left or right margins have the value auto, the browser determines the size of the margin, which will be such that the sum of the left and right margins and the content area is equal to the width of the content area of the containing block.

On an element that has no left and right padding or borders, when the sum of the widths of the content area and the left and right margins does not equal to the sum of the content area of the containing block, the right margin is expanded to fill the available space. However, if the left margin is set to auto, then the left margin expands to fill the available space.

margin-right:auto

On an element whose width is auto, margin-right:auto causes the element's right margin to become zero.

On an element that has its width set to a particular size and left margin set to zero or a particular size, margin-right:auto causes the element's right margin to expand to fill all the available space (after allocation of space to the content area and left margin). This is the default appearance of the right margin whether (when width and left-margin are of a particular size) or not there is a CSS declaration that matches the right margin.

Example 14: <div style="height:400px;width:400px"><p style="font-size:35px;font-family:'Times New Roman';margin-right:auto;width:200px">the quick brown fox jumps over the lazy dog, the five boxing wizards jump quickly</p></div>

margin-left:auto

On an element whose width is auto, margin-left:auto causes the element's left margin to become zero.

On an element that has its width to set a particular size and right margin set to zero or a particular size, margin-left:auto causes the element's right margin to expand to fill all the available space (after allocation of space to the content area and left margin).

Example 15: <p style="font-size:35px;font-family:'Times New Roman';margin-left:auto;width:200px">the quick brown fox jumps over the lazy dog, the five boxing wizards jump quickly</p>

margin-left:auto and margin-right:auto

On an element whose width is auto, if both the left and right margins have the value auto,  the element's left and right margins become zero.

On an element that has its width set to a particular size, having both left and right margins set to auto causes the available space (after allocation of the content area space) to be split equally among the left and right margins. Therefore, the element's content area will be horizontally centered in the containing block's content area.

Example 16: <p style="font-size:35px;font-family:'Times New Roman';margin-left:auto;margin-right:auto;width:200px">the quick brown fox jumps over the lazy dog, the five boxing wizards jump quickly</p>

margin-top:auto and margin-bottom:auto

margin-top:auto and margin-bottom:auto causes the top and bottom margins of element to become zero. However, in Internet Explorer 6 and Internet Explorer 7 the margins are greater than zero. This is a bug.

Note that if, after allocating the necessary vertical space to all the components of an element box there is still space left in the containing block, then the bottom margin expands and uses the remaining space, even if the element has the margin-bottom:auto declaration.

Margin Declarations in Percentages

Percentages in margin declarations refer to the width of the containing block element. Internet Explorer 6 frequently calculates percentage margins incorrectly. Note that even top and bottom margins are calculated with respect to the width (not the height) of the containing block element.

Margin Declarations in em

Margin declarations in em refer to the font size of the element to which the declaration applies.