Now let's see how this looks with some real examples to illustrate the box-model concept. We'll build up a style on an individual letter from default style (usually means "no" style) to a style with padding, border and margins, step by step.
Styles must be specified using the correct syntax in order for them to be understood by the browser. If there is any mistake in a style, it will be ignored by the browser.
For now, rather than going into detail or sending you to a CSS reference, we'll show you how some properties are used:
Measurements for these examples will be specified in "pixels" or "px" for short.
- Borders are specified as: "border: 1px solid black", where:
- "1px" means a one pixel line
- "solid" means a solid (as opposed to "dotted" or "dashed") line
- "black" means color the line black
Following is a sentence with no styling:
Mount Kilimanjaro is snow-capped.
Now let's explore the "CSS box model". We can add a border around the "K" in "Kilimanjaro" by adding the "border" property to this letter. Specifically we add the property "border: 1px solid black;". (the "px" means "pixels" or "picture elements", the most common measurement used in web programming):
Mount Kilimanjaro is snow-capped.
Let's add some padding around the letter which will push the border away from the "K", by adding "padding: 5px;"
Mount Kilimanjaro is snow-capped.
Now let's add some margin, So now with "margin: 10px;", you would see
Mount Kilimanjaro is snow-capped.
A more common use of borders is to surround an image with one. Here is an example of this with some padding added to give it a paper photograph type of appearance:
This was done by adding "style='padding: 10px; border: 1px solid #AAAAAA';" to the <img> tag. This addition to
the image tag means "I want 10 pixels of white space around the image and then draw a 1 pixel-wide light grey (#AAAAAA) line around the outside of this white space."