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. Block - As the name implies, it is displayed as a block element, and all default qualities of block formatting apply. Inline - As the name implies, it is displayed as an inline element, and all default qualities of inline formatting apply. List-item - Displays the element as a list-item that you would find in an ordered/unordered list. None - The element is not displayed at all; nor does it take up space on the page. (try it).
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). Auto - The computer automatically sets the value based on normal flow. Usually, the computer makes the box width=100%. *Length* - Specifies a fixed width. *Percentage* - Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block. (try it).
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`'. Auto - The computer automatically sets the value based on normal flow. *Length* - Specifies a fixed height. *Percentage* - Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block.
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. None - The location is normal, laid out according to the normal flow. Text does not flow around the box, but starts on the line below the box. Left - The box is positioned to the left of the line it is on and all text flows around the right side of the box. Right - The box is positioned to the right of the line it is on and all text flows around the left side of the box. (try it).
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. None - The computer allows text to flow as previously declared. Left - Text stops flowing around the box with 'float:left'). Right - Text stops flowing around the box with 'float:right'). Both - Text stops flowing around both boxes. (try it).
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. *Length* - The padding is a fixed distance from the box's border. *Percentage* - The padding is a percentage of the container's width/height. (try it).
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. Thin - The border is thin. Medium - The border is medium. Thick - The border is thick. *Length* - The border is the specified thickness. (try it).
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. Auto - The computer automatically sets the value based on normal flow. *Length* - The margin is a fixed distance from the container's edge. *Percentage* - The offset is a percentage of the container's width/height. If the containing block's height is not fixed, 'percentage' acts like 'auto'. (try it).

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.

Box Styles Work On Headers

In this lesson, we learned about these Style properties:: display; width; height; float; clear; margin; padding and; border

By now, your sample2.htm file should look like this.
For more information on the topics of this Lesson, see borders, margins, and padding.

Lesson 13 - Cascading Style Sheets/Box

Box Styles Work On Headers