Overflow

This property is used to control the behavior of container in which its content expend over its content area. It is not used to control the behavior of container of the container of the content. Normally overflow will not happen because the container of content can expend vertically or horizontally. For text content is non-replaced elements, overflow horizontally will not happen because it can be wrapped into next line. But overflow overcritical y is possible. But for Replaced Elements it can overflow horizontally.

Horizontal Formating of block element

The "seven properties" of horizontal formatting are: margin-left, border-left, padding-left, width, padding-right, border-right, and margin-right. Padding and margin is set to 0 by default. Width is set to auto. This means the block element will try expend as much as possible into its containing content space. /p>

The Containing Block

Every element is laid out with respect to its containing block; in a very real way, the containing block is the "layout context" for an element.For an element in the normal, Western-style flow of text, the containing block is formed by the content edge of the nearest block-level, table cell, or inline-block ancestor box. You don't need to worry about inline elements since the way they are laid out doesn't depend directly on containing blocks.

vertical-align

In CSS, the vertical-align property applies only to inline elements and replaced elements such as images and form inputs. vertical-align is not an inherited property. It can be one of baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit. The initial value is baseline. </p>

line-height

The line-height property refers to the distance between the baselines of lines of text rather than the size of the font, and it determines the amount by which the height of each element's box is increased or decreased. In the most basic cases, specifying line-height is a way to increase (or decrease) the vertical space between lines of text, but this is a misleadingly simple way of looking at how line-height works. line-height controls the leading, which is the extra space between lines of text above and beyond the font's size. In other words, the difference between the value of line-height and the size of the font is the leading.

When applied to a block-level element, line-height defines the minimum distance between text baselines within that element. Note that it defines a minimum, not an absolute value, and baselines of text can wind up being pushed further apart than the value of line-height

Every element in a line of text generates a content area, which is determined by the size of the font. This content area in turn generates an inline box that is, in the absence of any other factors, exactly equal to the content area. The leading generated by line-height is one of the factors that increases or decreases the height of each inline box.

To determine the leading for a given element, simply subtract the computed value of font-size from the computed value of line-height. That value is the total amount of leading. And remember, it can be a negative number. The leading is then divided in half, and each half-leading is applied to the top and bottom of the content area. The result is the inline box for that element.

As an example, let's say the font-size (and therefore the content area) is 14 pixels tall, and the line-height is computed to 18 pixels. The difference (four pixels) is divided in half, and each half is applied to the top and bottom of the content area. This creates an inline box that is 18 pixels tall, with 2 extra pixels above and below the content area. This sounds like a roundabout way to describe how line-height works, but there are excellent reasons for the description.