The Box Model
Loading...
Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.
10 Favorites & 1 Group
-
yi deng, Software Developer at Google,
favorited this 7 months ago
-
mapetite favorited this 8 months ago
-
mikytorres
favorited this 2 years ago
-
krispil
favorited this 2 years ago
-
terjin
favorited this 3 years ago
-
andrehuf
favorited this 3 years ago
-
rejuver
favorited this 3 years ago
-
thespirit666
favorited this 3 years ago
-
coriordan
favorited this 3 years ago
-
Praveen Kumar Sinha, Software Developer @ iKaru Projects India at (MPS) (X-Uzanto), favorited this 3 years ago
The Box Model - Presentation Transcript
- The Box Model <and how it relates to float layouts /> Advanced CSS Stephen Ireland
- What is The Box Model? Describing the manipulation of a block-level element through; • Margin <div> • Border Magna autpatuer irit non exer ad tincinc • Padding ipsusto dolute eum vent velenit aut lor in erilis acidunt aciduis nulput ad modiamet, • Height quisl ip eummodolorem am, sequat nit nim iriuscip Em dolobor eraessi. Rilisim • Width dolore vent ipit augiat, sed dolummod dipsusciduis dolor iurero odio dolobortie min eleniat. Duipit atisl in henit ulla commy But not position. </div> Advanced CSS Stephen Ireland
- The Box Model in Context Margin Border Padding Magna autpatuer irit non exer ad tincinc ipsusto dolute eum vent velenit aut lor in erilis acidunt aciduis nulput ad modiamet, Height quisl ip eummodolorem am, sequat nit nim iriuscip Em dolobor eraessi. Rilisim dolore vent ipit augiat, sed dolummod dipsusciduis dolor iurero odio dolobortie min eleniat. Duipit atisl in henit ulla commy Width Advanced CSS Stephen Ireland
- What Does This Mean? If the width of a div is set to 300px; • Add a 10px Margin • Add 20px Padding • And a 5px Border The visible width of the div is calculated as; 10px + 5px + 20px + 300px + 20px + 5px + 10px = 370px (370 pixels wide!) Advanced CSS Stephen Ireland
- A Necessary Recalculation To get the div to appear as 300px wide: • We need to adjust the width of the div accordingly • Subtract the margin, padding and border values from 300px 300px - 10px - 5px - 20px - 20px - 5px - 10px = 230px The div will display as 300px wide if we set the width to 230px Advanced CSS Stephen Ireland
- The Broken Box Model Internet Explorer the culprit • Versions 5.x affected (5.01, 5.5 etc) • Calculates widths and heights differently • IE6/7 can also be affected (quirks-mode) Quirks Mode • IE6 & 7 will revert if you do not specify a DOCTYPE • DOCTYPE needs to be first line in HTML document <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict// Advanced CSS Stephen Ireland
- Affects On Float Layouts Broken layouts • The broken box model can occur in Internet Explorer • Widths of block-level elements (DIV, p, h1 etc) will be different to other browsers such as Firefox, Safari or Opera • Your layout may work in one browser, but be broken in another. Advanced CSS Stephen Ireland
- Avoidance Tactics Avoid box model problems by; • Being aware of the problem and the fixes • Cross-browser testing (Firefox, Safari, IE5.x, 6 & 7) Listen carefully - neat trick! • Don’t apply margins or padding to a div in order to create space in a layout • Apply margins or padding to the elements inside the div (h2, h3, p etc) Advanced CSS Stephen Ireland
![Web Standards: Fueling Innovation [Web Design World Boston '08]](http://cdn.slidesharecdn.com/web-standards-fueling-innovation-1228796603037960-8-thumbnail-2?1228830780)
More info about this document
© All Rights Reserved
Go to text version
- Total Views 1727
- 1727 on SlideShare
- Comments 0
- Favorites 10
- Downloads 0
Most viewed embeds
All embeds
- Upload Info
- Uploaded via SlideShare
- Uploaded as Adobe PDF
0 comments
Post a comment