Bojack, Henry. New Perspectives Blended HTML, XHTML, and CSS: Introductory. Boston: Course Technology. 2010. 2nd ed.
The “Box” Method
The Css box model describes the boxes that are formed around elements in a web page. In XHTML, every element
is treated as though it were a box. The box model consists of four parts: a content area, padding, borders, and
margins.
The content area is the area that contains the box content, such as text or an image. By default, the content just
barely fits into the box; there is no white space surrounding the content. The box properties are used to add white
space and a border around the content. The three most commonly used CSS box properties are padding, border,
and margin properties further affect the width and height of an element.
Padding is white space that surrounds the box content. A border, a solid or decorative ruled line, can be placed
around the padding. Borders are useful because they can separate the content of one box from another or call
attention to a box. Optionally, you can change the border’s color, style, and width. The margin is white space
outside the border. The margin creates breathing room or rather separation among the boxes so they aren’t
crowded on the page.
You don’t have to use all three of these box properties at the same time. For example, you may want to have
padding and margin space around the contents of an element, but not a border.
Padding and Margin properties
Again, padding is the internal white space that surrounds the contents of an element; the padding properties
control this internal white space. By default, the content of an element does not have padding. The values for
both the padding and the margin properties can be expressed by using several different measurements:
 em (em values)
 px (pixels)
 mm (millimeters)
 cm (centimeters)
 in (inches)
 % (as a percentage of the container element)
o Follow the format as follows to set the padding within an element:
padding: width;
Where width is the size of the padding using one of the above CSS units of measure
Margin
Border
Padding
Content
Bojack, Henry. New Perspectives Blended HTML, XHTML, and CSS: Introductory. Boston: Course Technology. 2010. 2nd ed.
You can set the padding for each side individually by using the following four properties:
 padding‐top:
 padding‐right:
 padding‐bottom:
 padding‐left:
So for example, to set the padding on the left for a div using em values, you would use the following code:
div{
padding‐left: 1em;
}
The margin properties control the external white space, which is the white space outside the border. The margin
properties are often used to create space around elements. By default, there’s only one pixel of space above,
below, and to the left and right of an element. One pixel is very little white space, which means that elements will
appear too close to one another. You can set the margin using the following four properties:
 margin‐top:
 margin‐right:
 margin‐bottom:
 margin‐left:
o Follow the format as follows to set the margin space around an element:
margin: width;
Where width is the size of the margin using one of the CSS units of measure
Setting properties via shorthand
It is possible to set properties such as padding and margin properties that contain multiple properties under their
“umbrella” using shorthand. Of course it is perfectly fine to specifically define each particular property you are
attempting to set such as in the example below:
div {
margin‐top: 4px;
margin‐right: 0;
margin‐bottom: 4px;
margin‐left: 0;
}
However, it is possible to utilize a shorthand way of setting multiple properties in the same category. For example,
the margin property is a shorthand property that sets the margin on all four sides as shown below:
h1{
margin: 4px;
}
In the above example, margins for the top, right, bottom, and left have all been set to 4px using shorthand.
The same could be done with the padding property: h2{ padding: 1em; }
Bojack, Henry. New Perspectives Blended HTML, XHTML, and CSS: Introductory. Boston: Course Technology. 2010. 2nd ed.
You can also use the padding and margin properties to be more specific than declaring the same value for all four
sides at once. Here’s how shorthand for properties such as padding & margin work:
 If one value is listed, the value is used for all four sides equally.
 If two values are listed, the first value is applied to the top and bottom sides equally, and the second value
is applied to the left and right sides equally.
 If three values are listed, the first value is applied to the top side, the second value is applied to the left
and right sides equally, and the third value is applied to the bottom side.
 If four values are listed, the values are applied in this order: top, right, bottom, and left.
The table below shows examples of setting multiple properties using shorthand…

Every value, except for 0, must be accompanied by a unit of measurement, with no space between the value and
the measurement (should be 1em NOT 1_em where the pink highlight represents space). Values that are less than
one should be preceded with a Zero as it is good coding practice (for example 0.5em). This allows anyone reading
your code to know for sure that the value is less than one.
Border Properties
Border properties can be used to set decorative borders around an element and its content. A border can have its
style, color, and width changed. The following are the various looks or rather styles a border can have:
 solid  dashed  inset
 double  groove  outset
 dotted  ridge  none(no border would exist)
Keep in mind that browsers can display styles differently thus causing the border to look different from browser
to browser. Like padding and margin, border is a shorthand property containing multiple properties that can be
manipulated.
Below are the five border style properties (this means you could apply one of the above border styles to all four
sides or to a side or sides of your choice):
 border‐top‐style:
 border‐right‐style:
 border‐bottom‐style:
 border‐left‐style:
Border width is expressed with width values of thin, medium, and thick or can even be expressed using numerical
values followed by pixel, em, or percentage measurement. Again while browsers display values differently, in
Bojack, Henry. New Perspectives Blended HTML, XHTML, and CSS: Introductory. Boston: Course Technology. 2010. 2nd ed.
general a thin border is about 1px, a medium border is about 3 to 4px wide, and a thick border is around 4+ pixels
in width. Below are the five border‐width properties:
 border‐top‐width:
 border‐right‐width:
 border‐bottom‐width:
 border‐left‐width:
 border‐width:
Additionally border color can be manipulated for a border as well. Below are the five border color properties that
are changed using named color, rgb values or a hex value:
 border‐top‐color:
 border‐right‐color:
 border‐bottom‐color:
 border‐left‐color:
 border‐color:
CSS Classification Properties
In web page layout, positioning boxes on the page to be where you desire can be crucial. Two commonly used
properties, float and clear, are CSS classification properties that allow you to control how to display and position
an element.
Working with the Float Property
The float property is used to position boxes on the page and to wrap content, such as text, around a box. The
clear property is used to reposition an element below another element on the page.
Floated elements must have a width declaration and any element can be floated. The most commonly floated
elements are images and divs. To float an element, use the following:
float: position;
Whereby position is left, right, or none.
Working with the Clear Property
The clear property allows the contents of an element to appear below an element that has been floated. In other
words the next element won’t “appear or place” until it has cleared itself past the previously floated element. To
clear past an element use the following:
clear: position;
Where position is left (text begins below an element floated left), right (text begins below an element
floated right), or both (text begins below an element floated left or right).
Bojack, Henry. New Perspectives Blended HTML, XHTML, and CSS: Introductory. Boston: Course Technology. 2010. 2nd ed.
Conflicting Styles
Style precedence determines the order of in which the rules you create are followed. Remember there are three
ways to implement CSS or Cascading Style Sheets: Inline, Embedded, and External. Style precedence is a method
used to resolve conflicting styles. The order of precedence is as follows in the five sources for styles
below(highest to lowest):
1. User‐defined styles
2. Inline styles
3. Embedded styles
4. External style sheet styles
5. The browser’s style sheet (the browser’s default styles)
User styles have precedence over all other styles. An example of this would be an audience member choosing to
change their browser’s text size preferences. To change the text size a user using Firefox, for example, would
venture into the Tools from the menu bar and then click Options, followed by clicking the Content icon. A user
choosing to change this option may be doing so to compensate for visual impairment. However after user defined
styles, you as the web page author, can control inline, embedded, and external styles.