CSS Box Model

출처: http://www.w3.org/TR/CSS2/box.html

CSS를 통해서 어떻게 레이아웃을 잡고 사용하는지를 간단하게 보여준 예제...

UL {
	background: yellow;
	margin: 10px;
	padding: 5px;
	/* No borders set */
}
LI {
	color: white;		/* text color is white */
	background: blue;	/* Content, padding will be blue */
	margin: 10px;
	padding: 10px 0px 10px 10px;/* Note 0px padding right */
	list-style: none			/* no glyphs before a list item */
	/* No borders set */
}
LI.withborder {
	border-style: dashed;
	border-width: medium;		/* sets border width on all sides */
	border-color: lime;
}

	
First element of list
	
Second element of list is a bit longer to illustrate wrapping.