CSS Positioning: Margin, Border, and Padding
UPDATE: After reading this post, read the important addendum I added with the post titled DOCType? Why do I need that?
I’ve always had an issue with trying to remember in which order the margin, border, and padding items filled in an element in HTML and I came across some things that helped clairify it for me today, so I thought I’d share.
There you have it, on a div, button, etc, the white content is the contents of the tag, the blue is padding, then comes the border and finally the margin.
This is what a DIV tag would look like with nothing (other than a border) set would look like:
<div style=”width:500px; border: solid 1px black;”>…</div>
The following example has a 1px border so you can see where things fit, but also has a 25px padding around the inside:
<div style=”width:500px; padding:25px; border: solid 1px black;”>…</div>
This example shows using both margin and padding.
<div style=”width:500px; padding:25px; margin: 25px; border: solid 1px black;”>…</div>
There you go
- November is conference month…
- Running The IE VPC’s on other VPC Hosts?
- Testing Multiple IE Versions, VPC’s and Super Preview
- TechEd09 – Top 10 Mistakes Made By Web Developers
- VPC’s are coming…
- Running Multiple Versions Of IE On The Same Box
- Setting X-UA-Compatible with ASP.NET Pages
- Top 10 Web Mistakes [From TechEd EMEA]
- IE For Developers at Web 2.0 Expo
- Fronteers Session