Welcome
Articles are organised by date. Typically, there will be a new one as and when I have the time and find a subject to talk about.
- Padding
- Border
- Margin
- div
- {
- padding: 10px;
- border: 1px solid black
- margin: 10px;
- }
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <style>
- div
- {
- padding: 10px;
- margin: 10px;
- border: 1px solid black;
- width: 200px;
- </style>
- }
- <!--[if lte IE 5.5]>
- <style>
- padding: 10px;
- margin: 10px;
- border: 1px solid black;
- width: 222px;
- </style>
- <![endif]>
CSS Box Model
Contents
The Main CSS Box Model Attributes
One of the most crucial parts of using CSS is to understand the box model, although it is often one of the most difficult things to get to grips with at first.
There are 3 parts to the box model in CSS, starting in order from the innermost to the outermost section:
The border is probably the most obvious part, as it's the only really visible part of the model (depending on whether it is visible or not,) and is denoted by the black line in the above graphic. The area between the border and the actual content of the box is referred to as the padding (blue area), such as the gap between a paragraph of text and the border surrounding the paragraph. Lastly, the space surround an object outside of its border is the margin (green area). This is used to distance objects from one another on a page, particularly where one of more of the objects has a border itself. Note that padding and margins are actually invisible, and are only coloured in the above image for clarification purposes.
The above three attributes can be set in CSS in the following way:
The Model Types
There are essentially 2 types of box models: the W3C model, and the IE model (typical IE behaviour unfortunately.) They differ only in one aspect, and that is what is specified by the width of an object. In the W3C model, only the actual content of the box is included, so the margins, borders and padding is all extraneous. The IE model however, the padding and borders are included. Most people seem to agree that the latter model is the preferred, but the majority of browser types tend towards the W3C model.
Overriding IE
What this basically boils down to is the fact that your websites will look different on IE from all the other browsers out there (although incidentally IE for the Mac OS does behave like the other browsers.) All is not lost though, as IE 6 and 7 allow you to use a document declaration to specify which type of CSS model to use, quirks or standards mode, and IE 5 users can be catered for with conditional comments to include a stylesheet particular to that browser.
The quirks mode of IE can be triggered with the following declaration:
This has to be specified as a HTML doctype, as XHTML starts its specification with the transitional doctype. The transitional doctype is something which is specific to XHTML, and does pretty much what it says on the tin. It's a halfway specification between the standards compliant and quirks modes of browsers.
This will trigger the standards compliant CSS box model, but will avoid some of the more ambiguous behaviours of a strict doctype. Should you wish to use a strict doctype, one of the following (depending on whether you are using HTML or XHTML) will do the job:
While document type declarations will cater for most browsers, unfortunately IE 5 (and its variants) are left out. This can be resolved, as IE 5 introduced something called conditional comments. As these build upon the traditional HTML comment syntax non-IE browsers ignore these, which means you can still validate your website. Take the following example:
The conditional comments here specify any version of IE whose version is equal to or lower than 5.5. As conditional comments were only introduced to IE in version 5, it means that all 5.x variants are covered. The only change made in the above example is an increase to the width of the object, as it now includes the border and padding (so these aren't added afterwards like they wouyld be in other browsers.)
Other Styles
While the 3 above styles are the ones which are detrimental to the box model, the background attribute is affected too.
The only noteworthy point here is the fact that the background runs up to the outer edge of the border. This is not an issue if an object has no border whatsoever, and of marginal cause for concern if the border is very small, but can become a problem with larger borders, or double-line borders, as the background is hidden by the border (i.e. if a background image is specified) or the background shows in the border gap (i.e. the background colour or image shows between the two lines of a border.
The first problem can be tackled by using the border-position attribute in CSS, by offsetting it to a value equal to the border thickness. With the latter problem, there is unfortunately, only one way to escape this problem, and that is to use nested objects. The outer object will have the border, with the background colour and image left for the inner object to specify.
Keep Up To Date