CSS Margins, Borders, and Padding
September 8th, 2007
This is not very original, but I created my own little diagram to illustrate the CSS box model:
I found that keeping a printed copy of this diagram helps me when fighting CSS layout issues.
With CSS and HTML, feedback is instant. Edit the file, save it, then hit Refresh in the browser. Perhaps this led to laziness on my part. Rather than taking the time to really understand what was going on, I’d randomly tweak values until I got the layout I wanted.
In the end, however, taking the time to understand this aspect of CSS more deeply has made me a more effective developer.
Now if CSS only worked consistently in every browser…
[…] few days ago I posted a little diagram illustrating the CSS box […]
Never mind the better world where hidden trade markup doesn’t exist and designers are free to develop. Border is a margin overlay, background is a content underlay: they both have IE built-in box models. There are 3 active ((real)) layers. Content, padding and margin. The BLOCKQUOTE element is the perfect example of how proprietary markup attacks standards for the sake of product decoration. Ok, so is there a way to avoid experimentation fitting IE to reality? Yes, and it’s called specificity [groan]. Each box model expression in the browser surface counts for 1 point. LOL! Still testing to guess how many layer markups apply to what in which circumstance! At least 147(elements)x147(connections)x7(currentmarupweights)=151,263×2 (only x2 if its single row top or bottom of page) flukes to go. Get more on that at w3.org [search “selector, specificity”]. Frankly, experimental habituation OFTEN seems more promising to my poor bent head. This CSS dive is a cheap budget fix and in no way reflects a certain party’s desire to stop dressing exrtavagantly. Their only decent step (and it won’t happen) will be to add a specificity tool and status bar display for clicked selectors and elements in Expression Web. Which would be sort of like the First Lady wearing only panties everywhere. Too rebelious! Peter’s hiding. Got to go.