Delphinidin

- Padding
Padding is the space between the content of an element and its borders, as has been mentioned briefly in previous examples. The following code shows the various padding properties.

{padding: [ <length> | <percentage> ];}

{padding-top: <length> | <percentage>;}
{padding-right: <length> | <percentage>;}
{padding-bottom: <length> | <percentage>;}
{padding-left: <length> | <percentage>;}

Like margin, border-width, border-style, and border-color, the padding property is a shorthand property, meaning that it is a simplifi ed representation of the other padding properties, padding-top, padding-right, padding-bottom, and padding-left. In the preceding code, the square brackets are used to group the values. In this context, the padding property can accept either a length or a percentage value, and can have one to four space-separated values.

- Setting Dimensions
CSS 1 introduced the width and height properties as part of the CSS box model. CSS 2 expands on
those properties, providing minimum and maximum dimensions when variable lengths are involved,
as is the case with percentage width and height values.
The following sections examine each of CSS’s dimension properties individually.

-- Width
The width property is a pretty simple property; it sets the width of an element. According to the CSS box model diagram, width is the space measured from inside padding edge to inside padding edge. The following code outlines the width property and its possible values.

{width: <length> | <percentage> | auto;}
initial value: auto

The width property accepts a length unit, which is indicated in the preceding code with the <length> notation. When you apply a width to an element, you must also take into account the borders and padding as part of the overall horizontal area that the element will occupy, as well as the space between elements determined by their margins.

- Height
Like the width property, the height property sets the amount of space between the top-inside padding edge and the bottom-inside padding edge. The following code outlines the height property and its possible values.

{height: <length> | <percentage> | auto;}
initial value: auto

The height property works in the same way as the width property, but is less commonly used as most web pages are designed to scroll vertically, and setting a fixed height causes some strange effects.

- Minimum and Maximum Dimensions
The min-width, max-width, min-height, and max-height properties define minimum and maximum boundaries when it is necessary to constrain a width or height from expanding or contracting past a certain point. In a variable width design, where you design content to adapt to multiple screen resolutions, it is sometimes helpful to define where you want the document to stop stretching or stop contracting. For instance, if you have designed primarily with an 800 x 600 or 1024 x 768 screen resolution in mind, a user viewing your website at 1600 x 1200 pixels may see the content stretched pretty thin if an auto keyword or percentage values are used to define the width. This is where the CSS properties min-width, max-width, min-height, and max-height come into play.

-- Min-width and Min-height
The min-width property defines a lower-size constraint on an element. The available values for the min-width property are outlined in the following code.

{min-width: <length> | <percentage>;}
{min-height: <length> | <percentage>;}
initial value: 0

IE 6 and less do not support the min-width or min-height properties. The min-width and min-height properties define when an element should stop shrinking to fit the user’s window or its content.

-- Max-width and Max-height
In contrast to the min-width property, the max-width and max-height properties are used to set an upper constraint for width and height for elements.

{max-width: <length> | <percentage> | none;}
{max-height: <length> | <percentage> | none;}
initial value: none

As is the case for min-width and min-height, IE 6.0 does not support the max-width or max-height properties. The max-width and max-height properties allow you to defi ne a maximum length if the area
available to the element becomes larger.

- Overflowing Content
The CSS overflow property exists to manage content that is susceptible to dimensional constraints, where the content could possibly overflow the boundaries of those dimensional constraints. The following code outlines the overflow property and its possible values.

{overflow: visible | hidden | scroll | auto;}
initial value: visible

The two most common uses of the overflow property are to hide content when more content than space is available, or to apply scroll bars so that the extra content can be accessed. By default, the value of the overflow property is the visible keyword.These figures show that when the width and height specified are smaller than the content allows, the content overfl ows the edges of the box containing it. It is possible to control that overflow by causing scroll bars to appear, or the overflowing content to be invisible.

-- Overflowing Just the X or Y axis
Like the overflow property, overflow-x and overflow-y control overflow content, but they also allow users to control the overfl owing content with a scroll bar: only a vertical scroll bar for the overflow-y property, and only a horizontal scroll bar for the overflow-x property. Each property accepts the same values as the overflow property, as in the following code.

{overflow-x: visible | hidden | scroll | auto;}
initial value: visible

{overflow-y: visible | hidden | scroll | auto;}
initial value: visible

IE 6 and IE 7 only support the overflow-x and overflow-y properties when in standards compliant mode.

Read Again :
The Box Model: Controlling Margins, Borders, Padding, Width, and Height in CSS - Part 1