Box Model By : Payel Ghosh Mail : g.payel@ puneitlabs.com

What is the box model Box model defines contents inside an HTML element as being surrounded by an invisible rectangular box, surrounding this box are three rectangular belts, represented by the margin, border, and padding properties. Describing box model is the manipulation of a block-level element through: Margin Border Padding Height Width

Box model defines contents inside an HTML element as being surrounded by an invisible rectangular box, surrounding this box are three rectangular belts, represented by the margin, border, and padding properties.

Describing box model is the manipulation of a block-level element through:

Margin

Border

Padding

Height

Width

The box model in context

CSS Box Model : Margins margin Values: [ <length> | <percentage> | auto ]{1,4} | Initial value: Not defined Applies to: All elements Inherited: No Percentages: Refer to the width of the containing block Computed value: See individual properties Margin properties : margin-top, margin-right, margin-bottom, margin-left, margin; example: BODY { margin: 2px } /* all margins set to 2px */ BODY { margin: 1px 2px } /* top & bottom = 1px, right & left = 2px */ BODY { margin: 1px 2px 3px } /* top=1px, right=2px, bottom=3px, left=2px */

margin

Values: [ <length> | <percentage> | auto ]{1,4} |

Initial value: Not defined

Applies to: All elements

Inherited: No

Percentages: Refer to the width of the containing block

Computed value: See individual properties

Margin properties : margin-top, margin-right, margin-bottom,

margin-left, margin;

example:

BODY { margin: 2px } /* all margins set to 2px */

BODY { margin: 1px 2px } /* top & bottom = 1px, right & left = 2px */

BODY { margin: 1px 2px 3px } /* top=1px, right=2px, bottom=3px, left=2px */

CSS Box Model : Padding padding Values: [ <length> | <percentage> ] {1,4} Initial value: Not defined for shorthand elements Applies to: All elements Inherited: No Percentages: Refer to the width of the containing block Computed value: See individual properties (padding-top, etc.) Note: Padding should never be negative

padding

Values: [ <length> | <percentage> ] {1,4}

Initial value: Not defined for shorthand elements

Applies to: All elements

Inherited: No

Percentages: Refer to the width of the containing block

Computed value: See individual properties (padding-top, etc.)

Note: Padding should never be negative

CSS Box Model : Border Border : Values: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} | Initial value: Not defined for shorthand properties Applies to: All elements Inherited: No

Border :

Values: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} |

Initial value: Not defined for shorthand properties

Applies to: All elements

Inherited: No

The broken Box Model Broken layouts The broken box model occurs in internet explorer Widths of block-level elements ( div, p, h1 etc) will be different to other browsers like Mozilla, Opera, Safari Your layout may work in one browser , but be broken in another

Broken layouts

The broken box model occurs in internet explorer

Widths of block-level elements ( div, p, h1 etc) will be different to other browsers like Mozilla, Opera, Safari

Your layout may work in one browser , but be broken in another

Calculating the Box Model Web Standards Calculation Width deals with content only. Padding and border and margin are set in addition to the width. Box of 100px with padding: 10px; border: 10px need a width: 100px; IE 5 (all modes) IE 6/7 quirks mode Width deals with entire box model. Padding, and border are contained within the width. Box of 100px with padding: 10px; border: 10px need a width: 140px;

Web Standards Calculation

Width deals with content only. Padding and border and margin are set in addition to the width.

Box of 100px with padding: 10px; border: 10px

need a width: 100px;

IE 5 (all modes) IE 6/7 quirks mode

Width deals with entire box model. Padding, and border are contained within the width.

Box of 100px with padding: 10px; border: 10px

need a width: 140px;

Affects on layouts Internet explorer – the culprit Calculates widths and heights differently IE 5/6/7 are affected Quirks mode IE 6 and 7 will revert if you do not specify a DOCTYPE DOCTYPE needs to be first line in HTML document IE still reverts even after mentioning DOCTYPE

Internet explorer – the culprit

Calculates widths and heights differently

IE 5/6/7 are affected

Quirks mode

IE 6 and 7 will revert if you do not specify a DOCTYPE

DOCTYPE needs to be first line in HTML document

IE still reverts even after mentioning DOCTYPE

Avoidance Tactics Box model problems can be avoided by: staying aware of the problems and fixes Cross-browser testing some tricks Not to apply margin or padding to a div in order to create space in a layout. Apply margins or padding to the elements inside the div

Box model problems can be avoided by:

staying aware of the problems and fixes

Cross-browser testing

some tricks

Not to apply margin or padding to a div in order to create space in a layout.

Apply margins or padding to the elements inside the div

The Box Model Hacks Box-in-box The Tantek Hack Simplified Box Model Hack (SBMH) A modified SBMH Alternate Box Model Hack advantages and disadvantages Follow the link : http://css-discuss.incutio.com/?page=BoxModelHack

Box-in-box

The Tantek Hack

Simplified Box Model Hack (SBMH)

A modified SBMH

Alternate Box Model Hack

advantages and disadvantages

Follow the link :

http://css-discuss.incutio.com/?page=BoxModelHack