
Working with structural "boxes" and elements that act like boxes (such as images and tables) requires another set of Style rules. A "box" on an HTML page has elements (such as a couple of paragraphs, images, tables, whatever). Surrounding the element(s) is a "padding". Surrounding the Padding is a "border". Surrounding the Border is a "margin". The outside of the Margin is the outside of the Box. To look at it another way, you can put a "border" around any element; the space between the element and the border is called "padding". The space between the border and the outer edges of the box is called "margin".
On the left is the W3C box properties model (see it here).
You may have noticed, all of the web pages in this HTML Course use boxes, such as the one below. Here are the Style declarations that affect boxes:
display: | Possible values include 'block', 'inline', 'list-item' and
'none'. This value tells the computer how to display the box.
|
width: | Possible values include 'auto' (which is the default setting), 'length' and
'percentage'. This value tells the computer how wide to make the box (the X-axis).
|
height: | Possible values include 'auto' (which is the default setting), 'length' and
'percentage'. This value tells the computer how high to make the box (the Y-axis).
Note: since the default value for the Overflow property is 'visible', most browsers will
display the designated width for the element, but will display the entire element's height
regardless of the designated height unless Overflow is set to 'hidden'.
|
float: | Possible values include 'none' (which is the default setting), 'left' and
'right'. This sets the location of the "box", and determines whether text will flow
around it. Similar to Float declaration with the Img tag.
|
clear: | Possible values include 'none' (which is the default setting), 'left',
'right' and 'both'. This value tells the computer to stop flowing
text around the box. Similar to the Clear declaration with the Img tag.
|
padding-top: padding-right: padding-bottom: padding-left: |
Possible values include 'length' and 'percentage'. This value tells the
computer how wide to make the padding on each respective side.
|
border-top-width: border-right-width: border-bottom-width: border-left-width: |
Possible values include 'thin', 'medium' (the default setting), 'thick' and
'length'. This value tells the computer how wide to make the border on each
respective side.
|
border-color: | Possible values include any color. If only one color is specified, all four border edges will be that color. If four colors are specified (separated by spaces, not commas), the top border will be the first color, the right border will be the second color, the bottom border will be the third color and the left border will be the fourth color. (try it). |
border-style: | Possible values include 'none' (the default setting), 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset' and 'outset'. (try it). |
margin-top: margin-right: margin-bottom: margin-left: |
Possible values include 'auto' (which is the default setting), 'length' and
'percentage'. This value tells the computer how wide to make the margin on each
respective side.
|
There are shortcuts to writing some of the above.
- You can write margin:1em 2em 1em 2em to set the top, right, bottom and left margin widths respectively. If you specify only one width, it will apply to all four sides. (try it).
- You can write padding:1em 2em 1em 2em to set the top, right, bottom and left padding widths respectively. If you specify only one width, it will apply to all four sides. (try it).
- You can write border-width:thin medium thin medium to set the top, right, bottom and left border widths respectively. If you specify only one width, it will apply to all four sides. (try it).
- You can write border-top:thick ridge brown to set the width, style and color of the top border. The syntax is similar for the right, bottom and left borders. You can specify just one, two or all three of the values and the computer will respond accordingly. (try it).
- If you want all four sides of the border to be the same, you can write border:thick ridge brown to set the width, style and color of all four borders. You must specify the border style; border color and border width are optional. (try it).
Syntax samples (all of these appear between Style tags in the Head section of an HTML file):
<style type="text/css">
<!--
.box { width:75%; height:200px; margin:10px 25px; padding:5px;
border:groove thick red; background-color:pink; color:maroon; }
.right { float:right; text-align:right }
A { padding:10px; display:block; width:150px; border-style:outset; }
A:active { border-style:inset; }
-->
</style>
Could you envision what each will do? Its time to test what we've learned.
- Open sample2.htm.
- Between the Body tags, specify a paragraph with margins of 0.25in, border of thick groove blue, padding of 2em, background-color of aliceblue, float left, width of 200px and height of 200px.
- Type some text in the paragraph you just defined and view the display.
- Specify another paragraph with margins of 2em, border of thin, double, red, padding of 5%, background-color of pink, float right, width of 200px and height of 200px.
- Fill it with the same text you have in the other paragraph and view the display.
- Change the margins, borders and padding of each of the paragraphs and see what affect each declaration produces.
- Specify a header with padding of 0.5em and top/bottom borders of thick solid, clear both. Did it automatically clear both paragraphs?
Here's the paragraphs before step 6 above and the Header:
Havuquadore emadatis, otron niquidon sne tomuhius gepahas. Tosm est. Ipodr abapsiem, tasc ohasciem ici tematrus ninitas. Dretoquadus in hipliant munostont. Pem in osmidron schedismotis. Somore luporonis, last stofigon ivi utedrum osnaquidotis.
Havuquadore emadatis, otron niquidon sne tomuhius gepahas. Tosm est. Ipodr abapsiem, tasc ohasciem ici tematrus ninitas. Dretoquadus in hipliant munostont. Pem in osmidron schedismotis. Somore luporonis, last stofigon ivi utedrum osnaquidotis.
Box Styles Work On Headers
- In this lesson, we learned about these Style properties:
- display
- width
- height
- float
- clear
- margin
- padding and
- border
For more information on the topics of this Lesson, see borders, margins, and padding.