Help:Wiki University Wikitext--Margins

Attributes learned so far
So far we have learned the follow attributes: For a complete list of attributes treated in this tutorial click here
 * font-family:arial
 * color:white
 * font-size:14pt
 * background-color:lightgray
 * padding:10px
 * padding-top:10px
 * padding-bottom:10px
 * padding-right:10px
 * padding-left:10px

Margins

 * The next attribute to learn is margins.
 * Margins are rather like padding only the spacing takes place outside the boundaries not inside the boundaries of the paragraph or div tag.
 * There is also top, bottom, left and right sides that can be spaced as well.

Lets apply the attribute to our two Lorem ipsum paragraphs in the previous chapter and space them 10 pixels apart using div tags: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. If you wanted only to have a space between paragraphs, you would use "margin-bottom for the first paragraph and/or margin-top for the second paragraph.
 * Notice that the paragraphs are separated by 20 pixels which is the sum of the 10 plus 10 pixels in the margins.
 * Notice that the paragraphs are also 10 pixels from both the left and right side of the page.

 Exercises 1. What is the coding to install our lorem ipsum paragraph in your sandbox with a background color of light green with white text and a margin on the bottom of 40 pixels.

2. What is the coding to install our lorem Ipsum paragraph to you sandbox with a background color of light blue with white lext and a margin on the top of 20 pixels Check your answers >

 Quick Quiz
 * Margin-top only affects top of paragraph
 * A. True
 * B. False


 * Margin-left moves the paragraph to the right of the left side of the page
 * A. True
 * B. False


 * Margin-right moves the paragraph to the right of the right side of the of the page
 * A. True
 * B. False

Check your answers >