Cascading Style Sheets (CSS)

CIW Course in a Nutshell

Borders, Padding and Margins

It is often difficult to remember whether margins are inside the border or outside, But the word margin means "the edge", so it is logical that the margin is on the outside of the element

Configuring borders can be confusing and long-winded. There are a number of ways this can be achieved, but I have found that the long way around is the only way to ensure consistent results.

The CSS code to format this division is shown below:

#element1 {
	width: 200px;
	border-style: solid;
	border-width: 2px, 2px, 2px, 2px
}
              

The border-width values are specified in the order: top, right, bottom, and left. I expected that this code would not render correctly in Netscape, but it is making me out to be a liar, because it seems to work just fine.

The longer CSS code to format this division is shown below:

#element2 {
	width: 200px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px
}
              

The  more verbose code is, perhaps, easier to read and I would still advocate using this style to maintain browser consistency, despite what I have said earlier.

Design by Stephen

Certified Internet Webmaster

Page last Edited: 10 Nov 2011