Box Model

2,573 views

Published on

slide on box model,boroken box model and box model hacks

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,573
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
42
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Box Model

  1. 1. Box Model By : Payel Ghosh Mail : g.payel@ puneitlabs.com
  2. 2. What is the box model <ul><li>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. </li></ul><ul><li>Describing box model is the manipulation of a block-level element through: </li></ul><ul><li>Margin </li></ul><ul><li>Border </li></ul><ul><li>Padding </li></ul><ul><li>Height </li></ul><ul><li>Width </li></ul>
  3. 3. The box model in context
  4. 4. CSS Box Model : Margins <ul><li>margin </li></ul><ul><li>Values: [ <length> | <percentage> | auto ]{1,4} | </li></ul><ul><li>Initial value: Not defined </li></ul><ul><li>Applies to: All elements </li></ul><ul><li>Inherited: No </li></ul><ul><li>Percentages: Refer to the width of the containing block </li></ul><ul><li>Computed value: See individual properties </li></ul><ul><li>Margin properties : margin-top, margin-right, margin-bottom, </li></ul><ul><li>margin-left, margin; </li></ul><ul><li>example: </li></ul><ul><li>BODY { margin: 2px } /* all margins set to 2px */ </li></ul><ul><li>BODY { margin: 1px 2px } /* top & bottom = 1px, right & left = 2px */ </li></ul><ul><li>BODY { margin: 1px 2px 3px } /* top=1px, right=2px, bottom=3px, left=2px */ </li></ul>
  5. 5. CSS Box Model : Padding <ul><li>padding </li></ul><ul><li>Values: [ <length> | <percentage> ] {1,4} </li></ul><ul><li>Initial value: Not defined for shorthand elements </li></ul><ul><li>Applies to: All elements </li></ul><ul><li>Inherited: No </li></ul><ul><li>Percentages: Refer to the width of the containing block </li></ul><ul><li>Computed value: See individual properties (padding-top, etc.) </li></ul><ul><li>Note: Padding should never be negative </li></ul>
  6. 6. CSS Box Model : Border <ul><li>Border : </li></ul><ul><li>Values: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} | </li></ul><ul><li>Initial value: Not defined for shorthand properties </li></ul><ul><li>Applies to: All elements </li></ul><ul><li>Inherited: No </li></ul>
  7. 7. The broken Box Model <ul><li>Broken layouts </li></ul><ul><li>The broken box model occurs in internet explorer </li></ul><ul><li>Widths of block-level elements ( div, p, h1 etc) will be different to other browsers like Mozilla, Opera, Safari </li></ul><ul><li>Your layout may work in one browser , but be broken in another </li></ul>
  8. 8. Calculating the Box Model <ul><li>Web Standards Calculation </li></ul><ul><ul><li>Width deals with content only. Padding and border and margin are set in addition to the width. </li></ul></ul><ul><ul><li>Box of 100px with padding: 10px; border: 10px </li></ul></ul><ul><ul><ul><li>need a width: 100px; </li></ul></ul></ul><ul><li>IE 5 (all modes) IE 6/7 quirks mode </li></ul><ul><ul><li>Width deals with entire box model. Padding, and border are contained within the width. </li></ul></ul><ul><ul><li>Box of 100px with padding: 10px; border: 10px </li></ul></ul><ul><ul><ul><li>need a width: 140px; </li></ul></ul></ul>
  9. 9. Affects on layouts <ul><li>Internet explorer – the culprit </li></ul><ul><li>Calculates widths and heights differently </li></ul><ul><li>IE 5/6/7 are affected </li></ul><ul><li>Quirks mode </li></ul><ul><li>IE 6 and 7 will revert if you do not specify a DOCTYPE </li></ul><ul><li>DOCTYPE needs to be first line in HTML document </li></ul><ul><li>IE still reverts even after mentioning DOCTYPE </li></ul>
  10. 10. Avoidance Tactics <ul><li>Box model problems can be avoided by: </li></ul><ul><li>staying aware of the problems and fixes </li></ul><ul><li>Cross-browser testing </li></ul><ul><li>some tricks </li></ul><ul><li>Not to apply margin or padding to a div in order to create space in a layout. </li></ul><ul><li>Apply margins or padding to the elements inside the div </li></ul>
  11. 11. The Box Model Hacks <ul><li>Box-in-box </li></ul><ul><li>The Tantek Hack </li></ul><ul><li>Simplified Box Model Hack (SBMH) </li></ul><ul><li>A modified SBMH </li></ul><ul><li>Alternate Box Model Hack </li></ul><ul><li>advantages and disadvantages </li></ul><ul><li>Follow the link : </li></ul><ul><li>http://css-discuss.incutio.com/?page=BoxModelHack </li></ul>

×