Difference between revisions of "CSS:BoxModel"
From mi-linux
Jump to navigationJump to search| Line 3: | Line 3: | ||
[[Image:boxmodel.gif|The box model - from http://www.w3.org/TR/REC-CSS2/box.html]] | [[Image:boxmodel.gif|The box model - from http://www.w3.org/TR/REC-CSS2/box.html]] | ||
| + | |||
| + | Let's experiement with some of these spacial concepts with simple paragraphs: | ||
| + | |||
| + | ''HTML document'' | ||
| + | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | ||
| + | <HTML> | ||
| + | <HEAD> | ||
| + | <TITLE>CSS 2</TITLE> | ||
| + | <LINK rel="stylesheet" href="style4.css" type="text/css"> | ||
| + | </HEAD> | ||
| + | <BODY> | ||
| + | <P id="first">contents of section 1</P> | ||
| + | <P id="second">contents of section 2</P> | ||
| + | <P id="third">contents of section 3</P> | ||
| + | </BODY> | ||
| + | </HTML> | ||
| + | |||
| + | ''CSS document (save as style4.css)'' | ||
| + | <nowiki>#first {padding:10px; margin:10px; border:1px solid #00ff00} | ||
| + | #second {padding:20px; margin:20px; border:2px dashed #0000ff} | ||
| + | #third {padding:30px; margin:30px; border:3px dotted #ff0000}</nowiki> | ||
Revision as of 12:48, 5 September 2007
The box model
When using CSS, every element can be thought of as an object with several different boundaries. The "content" is separated from the "border" by "padding", and the "border" is seperated from the next object by the "margin." Each of these boundaries are controllable through CSS. The picture below demonstrates the concept well:
Let's experiement with some of these spacial concepts with simple paragraphs:
HTML document <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML>
<HEAD>
<TITLE>CSS 2</TITLE>
<LINK rel="stylesheet" href="style4.css" type="text/css">
</HEAD>
<BODY>
contents of section 1
contents of section 2
contents of section 3
</BODY>
</HTML>
CSS document (save as style4.css)
#first {padding:10px; margin:10px; border:1px solid #00ff00}
#second {padding:20px; margin:20px; border:2px dashed #0000ff}
#third {padding:30px; margin:30px; border:3px dotted #ff0000}
