the line height will change.This is a continuation of the material in the element boxes page.
All elements generate a rectangular box called an element box. The element box defines or delineates the amount of space that element occupies in the layout. By default a web page layout is made up of a series of rectangular boxes that do not overlap each other. That is by default. Boxes can overlap if the layout instructions specify an overlap.
Properties controlling height do not apply to inline non-replaced elements.
By default, element boxes provide only a small amount of space around their contents. This space can be changed using margins and / or padding. Quite often which is used does not really matter. However, if the element has a background, the background will extend into the padding, but not into the margin.
By default, element boxes provide only a small amount of space around their contents. This space can be changed using margins and / or padding. Quite often which is used does not really matter. However, if the element has a background, the background will extend into the padding of 8px.
By default, element boxes provide only a small amount of space around their contents. This space can be changed using margins and / or padding. Quite often which is used does not really matter. However, if the element has a background, the background will not extend into the margin of 8px.
The default for both margin and padding is 0 (zero). Both will accept any absolute or relative length values. Neither one is inherited. In other words, if you want a p element inside a div element to have the same margins and / or padding as the div element you have to define margins and padding for the p element. Both margins and padding can be applied to any or all of four areas: top, right, bottom, left. Both margins and padding can be specified either as one or two or four values after the attribute or separately using one or two or three or four different attributes.
| Attribute | Values | Meaning |
| margin | 4px | All margins on all sides are 4px |
| margin | 2pt 3pt | Top and Bottom: 2pt Left and Right: 3pt |
| margin | 10px 20px 15px 5px | Top: 10px Right: 20px Bottom: 15px Left: 5px |
| margin-left | 0.25em | Left margin is 0.25em |
| margin-bottom | 0.5cm | Bottom margin is 0.5cm |
| margin-right | 0.4in | Right margin is 0.4in |
| margin-top | 10% | Top margin is 10% |
| padding | 3em | All padding on all sizes is 3m |
| padding | 2px 6pt | Padding top and bottom is 2px, padding left and right is 6pt |
| padding | 5% 2mm 8% 0.25in | Top: 5% Right: 2mm Bottom: 8% Left: 0.25in |
| padding-bottom | 0.4in | Bottom padding is 0.4in |
| padding-left | 0.25em | Left padding is 0.25em |
| padding-right | 10% | Rght padding is 10% |
| padding-top | 0.5cm | Top padding is 0.5cm |
Here are some examples that might help clarify margin and padding settings.
Here are some examples that might help clarify margin and padding settings. The red line is on the border. This first example uses margin: 10px. Notice the distance between the border and the contents.
Here are some examples that might help clarify margin and padding settings. The red line is on the border. This second example uses margin: 2em 1em. The left and right inset is probably most noticeable. But you should see the spacing between this paragraph and the previous one. Notice the distance between the border and the contents.
Here are some examples that might help clarify margin and padding settings. The red line is on the border. This third example uses margin: 1em 10% 2em 20%. The left and right insets are probably most noticeable. Note the spacing between this paragraph and the previous one. Notice the distance between the border and the contents.
Here are some examples that might help clarify margin and padding settings. The red line is on the border. This first example uses padding: 10px. Notice the distance between the border and the contents.
Here are some examples that might help clarify margin and padding settings. The red line is on the border. This example uses padding: 2em 1em. The left and right inset is probably most noticeable. Notice the distance between the border and the contents.
Here are some examples that might help clarify margin and padding settings. The red line is on the border. This example uses padding: 1em 10% 2em 20%. The left and right insets are probably most noticeable. Notice the distance between the border and the contents.
There is nothing against using both margin and padding in the same style.
There is nothing against using both margin and padding in the same style. Here is an example with margin: 1em and padding: 5%. Notice where the border is in relation to the contents and the general limits of the body. (The body has margin-left and margin-right set to 5%.)
When using percentages it is important to remember the percent is applied to the parent element. They will change if the dimensions of the parent change. There are no margin or padding settings on this paragraph so it uses the 5% margin-left and margin-right of the body.
When using percentages it is important to remember the percent is applied to the parent element. They will change if the dimensions of the parent change. This paragraph is inside a div with no margin or padding settings so it looks much the same as the previous one.
When using percentages it is important to remember the percent is applied to the parent element. They will change if the dimensions of the parent change. This paragraph is inside a div with a margin of 2em and padding set to 8mm.
Negative margins cause the element box either to stick out of its parent or overlap other elements. Here is an introductory example using the following.
div {border: 1px dotted gray; margin: 1em;}
p {margin: 1em; border: 1px dashed silver; }
p.one {margin: 0 -1em; }
p.two {margin: -1em 0; }
p {margin: 1em; border: 1px dashed silver; }
p.one {margin: 0 -1em; }
p.two {margin: -1em 0; }
Here is another example which approaches what can be done with desktop publishing.
Cégep de Matane offers courses in nursing, photography, multimedia integration and IT. The Matane, Que.-based technical college uses Oracle Collaboration Suite (OCS) software that includes collaboration tools such as Web conferencing, e-mail, calendaring, file storage and content searching. These tools allow teachers to better track student progress, said Louise Dubuc, an English as a second language (ESL) teacher at the college. Users access OCS via a customizable Web portal and the suite uses applets to gather the calendar information, e-mail messages and other data. Both students and teachers can access course information, grades and e-mail in one central portal, Dubuc said.
According to Rene Roy, IT co-ordinator for the school, the new portal is built on top of Cegep's Oracle database and application server environment and simplifies school tasks such as disseminating course outlines and managing staff and student schedules. The technology also improves the school's transparency – students can access calendars of teachers and educational advisers at any time to arrange appointment times, Roy said. Personal notifications, meeting notes and notices affecting students are added automatically to students' calendars.
The actual project began last August. By the end of 2004, Roy said, all college activities were available on the portal. Currently all 120 teachers and 600 students at the college are using the system. Having a central data repository means multiple users can now work collaboratively on the same document, Roy said. For example, teaching staff can work together to finalize course content without having to schedule multiple meetings in person.
The portal increases overall productivity, Dubuc said, and gives students a way to track academic development. The solution also enables Dubuc to operate in a virtually paper-free environment and allows students to complete homework and assignments online. The system tracks grades and attendance rates – this allows teachers to quickly determine if a student requires extra help, she added. It certainly encourages communication. We now have access to student e-mails at our fingertips.
Remember from the note above that changes in height will not affect inline non-replaced elements. Here is a quick example to illustrate this point. The strong text has a style applied to it with all margins set to 25px. While this changes the spacing to the left and right of the words it does not affect line height.
Remember from the note above that changes in height will not affect inline non-replaced elements. Here is a quick example to illustrate this point. The strong text has a style applied to it with all margins set to 25px. While this changes the spacing to the left and right of the words it does not affect line height.
Negative margins work as expected. For example, a negative value for margin-left will cause a non-replaced inline element to shift to the left, overlapping any information that is there.
Vertical margin settings do affect the line height when used with replaced inline elements. A typical example of an inline replaced element is an image. When added to a block element the line height will change.
Padding works very much like margins except that padding is the space between the content area and the borders. Here are a couple of examples.
Here is a heading with settings for padding attributes on all four sides. top: 10px, right: 2em, bottom: 24pt, left: 1emNotice where the space occurs between the border and the contents. Notice it is not the same all around the paragraph.
By default padding is set to zero. Without a border, padding in text is often equivalent to margin. And both are similar to adding "extra" space between paragraphs with a word processor. Like margin, padding with percents is dependent on the parent for the "reference" amount. In other words, the parent sets the "100%" size and the child uses the parent's size to calculate its own padding. Here are two paragraphs that are both inside div elements. The only difference between the two is the width of the div.
Like margin, padding with percents is dependent on the parent for the "reference" amount. In other words, the parent sets the "100%" size and the child uses the parent's size to calculate its own padding. Here are two paragraphs that are both inside div elements. This div has width: 600px. In both cases padding: 10%.
Like margin, padding with percents is dependent on the parent for the "reference" amount. In other words, the parent sets the "100%" size and the child uses the parent's size to calculate its own padding. Here are two paragraphs that are both inside div elements. This div has width: 300px. In both cases padding: 10%.
Padding for inline elements works as we would expect. For non-replaced inline elements, left and right padding is added to the element but not to the line in which it appears, top and bottom padding have no effect. For replaced inline elements, left and right padding is added to the element but not to the line in which it appears, top and bottom padding do not change line height. Vertical padding will overlap the line above and / below.
Padding for inline elements works as we would expect. For non-replaced inline elements, left and right padding is added to the element but not to the line in which it appears, top and bottom padding have no effect. For replaced inline elements, left and right padding is added to the element but not to the line in which it appears, top and bottom padding do not change line height. Vertical padding will overlap the line above and / below.
Inside the margins of an element are borders. I have used borders throughout this page to indicate the "edge" between padding and margin. Every border has three possible characteristics: width, style, colour. The default border width is medium which is not a defined value but is usually 2px. However the default setting for border-style is none. If there is no border style set then the border does not exist. The default border colour is the foreground colour of the element, the colour of the text most of the time. Border colour is inherited, border style and border width are not inherited.
Ths paragraph shows four of the options for border-style. If one of these options is not chosen, then there will be no border, even if border-width and border-color are set in a style. The values here are top:dotted, right:dashed, bottom:solid left:double.
Ths paragraph shows four other options for border-style. If one of these options is not chosen, then there will be no border, even if border-width and border-color are set in a style. The values here are top:groove, right:ridge, bottom:inset left:outset. It is a little difficult to see what effect Inset and Outset have. Outset can be used to make an image look like a button .
Here's the same image with an inset border Note both of these images have border-width:6px and border-color:#990.
As you have already seen different border styles can be applied to different sides of the element's content box. The same is true for border widths and border colours.
Border widths can use the various length units that apply to most attributes. Border widths also have three preset widths: thin, medium, thick. These values are not defined except by the browser, they will have the same size and same relationship to each other in every file seen by that particular browser.
Border color uses the various colours that apply to most attributes. Border color can also be set to transparent. As mentioned on the colour page, it is best to use only web-safe colours if you want the colour you want as a designer to be the same as the viewer sees.
Border can be used to shorten the typing. It is shorthand but the three values typed after it must be typed in the proper order. It is useful if you want all four borders to be identical: border: width style color as in border: 4pt dashed #999 for this paragraph.
Borders used with inline elements react much as we would expect, left and right borders affect the spacing to the left and right of the affected words. Top and bottom borders do not affect vertical height.
Borders used with inline elements react much as we would expect, left and right borders affect the spacing to the left and right of the affected words. Top and bottom borders do not affect vertical height.
Borders used with inline elements react much as we would expect, left and right borders affect the spacing to the left and right of the affected words. Top and bottom borders do not affect vertical height.