Check this out:
|Click to enlarge.|
As we examine Dreamweaver's facility with CSS, you may find the approach to margins, padding, and borders to be a bit confusing. The basic idea is that you have an element, such as a picture, that can have padding, a border, and a margin.
The relationship of the element, padding, border, and margin can be conceptually framed using a box: the CSS Box Model, pictured to the right (courtesy of image CSS
The padding inserts space between the element and the border, while the margin inserts space between the bordered element and other elements, such as text. Notice the white space pushing the text away from the graphics in this announcement; that is achieved by margins top, right, bottom, and left.
The CSS rules as applied to the "Box" proceed clockwise: top, right, bottom, and left. In other words, think of a clock and build all your rules that way: 12 o'clock is the top, 3 o'clock is the right, 6 o'clock is the bottom, and 9 o'clock is the left. In using padding, borders, and margins, you create the rule by "going around the clock." We'll practice this in class today and in future class meetings.
A note in closing: remember that you could be working on ex1-myweb.htm
(exercise 1) without using Dreamweaver. The discussion content can be written in Word and then ported over into your Web page. I would encourage you to write as much of that discussion material as you can now.
If you have questions, just e-mail me at email@example.com
. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below. Note also that each announcement has a permanent link, available through the announcement title and posting date.
Labels: clock model, CSS, CSS box model, Dreamweaver, Exercise 1, white space