Borders, Padding, and Margins

Nearly all HTML elements can have borders. This is the case whether or not there are normally borders around the object. Border styles, widths, and colors are set with the properties shown in the following table.

CSS and DOM Reference	Values
border-style:style object.style.borderStyle="style" border-top-style:style object.style.borderTopStyle="style" border-right-style:style object.style.borderRightStyle="style" border-bottom-style:style object.style.borderBottomStyle="style" border-left-style:style object.style.borderLeftStyle="style"	Sets the style of a border surrounding a page element. The style can be applied to all borders (border-style, borderStyle) or to selected borders. Style types can be   dashed   dotted   double   groove   inset   none   outset   ridge   solid
border-width:width object.style.borderWidth="width" border-top-width:width object.style.borderTopWidth="width" border-right-width:width object.style.borderRightWidth="width" border-bottom-width:width object.style.borderBottomWidth="width" border-left-width:width object.style.borderLeftWidth="width"	Sets the width of a border surrounding a page element. The width can be applied to all borders (border-width, borderWidth) or to selected borders. Widths can be   thin   medium   thick   npx
border-color:color object.style.borderColor="color" border-top-color:color object.style.borderTopColor="color" border-right-color:color object.style.borderRightColor="color" border-bottom-color:color object.style.borderBottomColor="color" border-left-color:color object.style.borderLeftColor="color"	Sets the color of a border surrounding a page element. The color can be applied all borders (border-color, borderColor) or to selected borders. The color is specified as a color name, hexadecimal value, or RGB value.
border:style width color object.style.border="style width color"	Border styles, widths, and colors can be set with the single border specification by coding these values separated by a blank space:   border:solid 1px red   border="solid 1px red"

Figure 10-17. Border styles.

Setting Borders

The following division shows various border styles, widths, and colors by selecting the combinations with the radio buttons.

<script type="text/javascript">

function ChangeStyle(Style) {
  document.getElementById("DIV").style.borderStyle = Style;
}

function ChangeWidth(Width) {
  document.getElementById("DIV").style.borderWidth = Width;
}

function ChangeColor(Color) {
  document.getElementById("DIV").style.borderColor = Color;
}
</script>


<div id="DIV" style="border:solid 1; padding:10px">
  To change the border style, width, and color surrounding this division,
  click the radio buttons below.
</div>

<table border="1">
<tr>
  <td>
    <b>borderStyle</b><br/>
    <input type="radio" name="Style" onclick="ChangeStyle('solid')" checked/>solid<br/>
    <input type="radio" name="Style" onclick="ChangeStyle('dashed')"/>dashed<br/>
    <input type="radio" name="Style" onclick="ChangeStyle('dotted')"/>dotted<br/>
    <input type="radio" name="Style" onclick="ChangeStyle('double')"/>double<br/>
    <input type="radio" name="Style" onclick="ChangeStyle('groove')"/>groove<br/>
    <input type="radio" name="Style" onclick="ChangeStyle('inset')"/>inset<br/>
    <input type="radio" name="Style" onclick="ChangeStyle('outset')"/>outset<br/>
    <input type="radio" name="Style" onclick="ChangeStyle('ridge')"/>ridge<br/>
    <input type="radio" name="Style" onclick="ChangeStyle('none')"/>none<br/>
  </td>
  <td>
    <b>borderWidth</b><br/>
    <input type="radio" name="Width" onclick="ChangeWidth('1px')" checked/>1px<br/>
    <input type="radio" name="Width" onclick="ChangeWidth('2px')"/>2px<br/>
    <input type="radio" name="Width" onclick="ChangeWidth('3px')"/>3px<br/>
    <input type="radio" name="Width" onclick="ChangeWidth('4px')"/>4px<br/>
    <input type="radio" name="Width" onclick="ChangeWidth('5px')"/>5px<br/>
    <input type="radio" name="Width" onclick="ChangeWidth('7px')"/>7px<br/>
    <input type="radio" name="Width" onclick="ChangeWidth('10px')"/>10px<br/>
  </td>	
  <td>
    <b>borderColor</b><br/>
    <input type="radio" name="Color" onclick="ChangeColor('white')"/>white<br/>
    <input type="radio" name="Color" onclick="ChangeColor('black')" checked/>black<br/>
    <input type="radio" name="Color" onclick="ChangeColor('red')"/>red<br/>
    <input type="radio" name="Color" onClick="ChangeColor('blue')"/>blue<br/>
    <input type="radio" name="Color" onclick="ChangeColor('teal')"/>teal<br/>
    <input type="radio" name="Color" onclick="ChangeColor('green')"/>green<br/>
    <input type="radio" name="Color" onclick="ChangeColor('')"/>"" (null)<br/>
  </td>
</table>

Listing 10-15. Code to change border styles dynamically.

When border styles are set with borderStyle, borderWidth, and borderColor, all four borders of the container take on the same style settings. A shortcut method of setting all borders to the same style uses the CSS and DOM formats,

border:style width color
object.style.border="style width color"

where chosen style, width, and color properties are specified in a space-delimited list of values. CSS and DOM style settings can be coded, for example, as

border:ridge 1px #FF0000
object.style.border="ridge 1px #FF0000"

All three values do not have to appear in the list, only those values that are to be set. The properties can appear in any order.

Different settings can be specified for each of the four borders, either as style sheet settings or scripted settings. Below is an example that changes individual borders.

Figure 10-19. Setting individual border styles.

<div style="border:solid 1; padding:10px"
  onclick="this.style.borderTop='dashed 5px green';
           this.style.borderRight='none';
           this.style.borderBottom='dashed 5px green';
           this.style.borderLeft='none'">
This is a paragraph enclosed by a division with a solid border 1 pixel in
width. When the mouse is clicked anywhere in the paragraph, individual
border styles are changed.
</div>

Listing 10-16. Code to set individual border styles.

Setting Padding

Borders enclose contained text tightly; there is little or no white space between the border and its enclosed contents. White space is introduced between the contents of a container and its borders with the padding style. Padding can be set around all four sides of the element, or individual sides can take on different amounts of padding.

CSS and DOM Reference	Values
padding:width object.style.padding="width" padding-top:width object.style.paddingTop="width" padding-right:width object.style.paddingRight="width" padding-bottom:width object.style.paddingBottom="width" padding-left:width object.style.paddingLeft="width"	Sets the width of padding surrounding the contents of an element. Measurement is normally in pixels. Padding can be applied around all four sides of the container or individual sides can have different amounts of padding.

Figure 10-20. Padding styles.

Below is a block of text that has initial padding of 10 pixels that is increased to 20 pixels when the text is clicked.

<div style="border:solid 1px; padding:5px" 
onclick="this.style.padding='30px'">

This is text enclosed by a division with a solid black border 1 pixel in 
width and with surrounding padding of 5 pixels. When the mouse is clicked 
anywhere in the text, the padding around the division is increased to 30 
pixels.

</div>

Listing 10-17. Code to set padding for a division.

Setting Margins

A page element's margins are the amounts of space between the borders of the element and any surrounding content on the page. Margins are set or changed with the settings shown in the following table.

CSS and DOM Reference	Values
margin:width object.style.margin="width" margin-top:width object.style.marginTop="width" margin-right:width object.style.marginRight="width" margin-bottom:width object.style.marginBottom="width" margin-left:width object.style.marginLeft="width"	Sets the width of the margin surrounding an element. Measurement is normally in pixels. A single margin width can be set around all sides of the element (margin), or margins can be set individually on each side.

Figure 10-22. Margin styles.

One of the primary uses for margins is to set the amount of space between a "floated" element and its surrounding text. For example, the division to the left has a float:left style setting to cause text to word wrap around its right side. Clicking inside the division expands its right margin (marginRight) and bottom margin (marginBottom) to increase the amount of space separating it from the surrounding text. This change is effected with the following <div> tag

<div style="float:left; width:300px; border:solid 1px black; 
  padding:10; margin-right:5px"
  onclick="this.style.marginLeft='50px'; this.style.marginBottom='20px'">

This is a division with standard margins that floats to the left to permit 
word wrap around its right edge. When the division is clicked, its right and 
bottom margins are increased to expanded the amount of white space between 
the division and its surrounding text.

</div>

Listing 10-18. Code to set margins for a division.

Collapsing Table Borders

In an XHTML table, individual cells are surrounded by borders so that two adjacent cells have double lines between them. Through stylesheets and scripting, however, these double-borders between cells can be collapsed to single borders, providing a cleaner look for the table.

CSS and DOM Reference	Values
border-collapse:value object.style.borderCollapse="value"	Sets whether adjacent table cells are rendered separately or merged into a single border; value is   collapse   separate

Figure 10-24. Border-collapse property of a table.

The effect of applying the border-collapse property to a table is shown in the following example. When the button accompanying the table is clicked, the border style is alternated between collapse and separate property values. Note that the property setting only affects the inner borders between cells. The table's outer border is not affected, but it can be styled with any of the border styles.

<script type="text/javascript">

function Collapse() {
  if (document.getElementById("MyTable").style.borderCollapse == "collapse"){
    document.getElementById("MyTable").style.borderCollapse = "separate";
    document.getElementById("MyButton").value = "Collapse Borders"; 
  } else {
    document.getElementById("MyTable").style.borderCollapse = "collapse";
    document.getElementById("MyButton").value = "Separate Borders";
  }
}
</script>

<table id="MyTable" border="5" cellpadding="3">
<tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
  <td>Cell 3</td>
</tr>
<tr>
  <td>Cell 4</td>
  <td>Cell 5</td>
  <td>Cell 6</td>
</tr>
<tr>
  <td>Cell 7</td>
  <td>Cell 8</td>
  <td>Cell 9</td>
</tr>
</table>

<input id="MyButton" type="button" value="Collapse Borders"
onclick="Collapse()"/>

Listing 10-19. Code to change the border-collapse property of a table.

The button is originally labeled (value) "Collapse Border". When it is clicked, the Collapse() function is called. Within the script, a test is made of the current borderCollapse property setting for the table. If the setting is "collapse", then it is changed to "separate"; if the setting is "separate", it is changed to "collapse". At the same time, the label on the button is switched between "Collapse Border" and "Separate Border" to indicate the alternate settings provided in the script.

Notice that in addition to setting style properties for XHTML elements, scripts can detect existing style settings. Scripts have both "get" and "set" access to most style properties.

Interesting inner borders can be created around table cells. The following examples show various border styles applied to the <td> tags of the tables. These borders can be applied to all cells through an embedded style sheet, or selectively with inline style sheets applied to individual cells.

One way to make table cells dynamic is to make them responsive to mouse clicks. In the following example, a click on a cell alters its appearance. The user can click on a cell to emphasize it, and click again to restyle it to normal.

<script type="text/javascript">

function HiLite(Cell) {
  if (Cell.style.backgroundColor == "") {
    Cell.style.borderStyle = "outset";
    Cell.style.borderWidth = "3px";
    Cell.style.backgroundColor = "gray";
    Cell.style.color = "white" ;
    Cell.style.fontWeight = "bold"; 
  } else {
    Cell.style.borderStyle = "inset";
    Cell.style.borderWidth = "1px";
    Cell.style.backgroundColor="";
    Cell.style.color="black";
    Cell.style.fontWeight = "normal";
  }
}

</script>

<table border="3" cellpadding="5">
<tr>
  <td onclick="HiLite(this)">Cell 1.1</td>
  <td onclick="HiLite(this)">Cell 1.2</td>
  <td onclick="HiLite(this)">Cell 1.3</td>
</tr>
<tr>
  <td onclick="HiLite(this)">Cell 2.1</td>
  <td onclick="HiLite(this)">Cell 2.2</td>
  <td onclick="HiLite(this)">Cell 2.3</td>
</tr>
<tr>
  <td onclick="HiLite(this)">Cell 3.1</td>
  <td onclick="HiLite(this)">Cell 3.2</td>
  <td onclick="HiLite(this)">Cell 3.3</td>
</tr>
</table>

Listing 10-20. Code to style individual table cells.

When clicked, each cell calls the HiLite() function, passing a self reference to it. If the cell does not currently have a background color (backgroundColor == ""), then it is given new style settings to make it stand out. Otherwise, its style is set back to normal.

TOP | NEXT: Background Images