Help:Wiki University HTML-- Margins





<< Previous Chapter Next Chapter >>

MARGINS

 * The next attribute to learn is margins.
 * Margins are rather like padding only the spacing takes place outside the borders not inside the borders of the paragraph or div tag.

Let's apply the margin 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.
 * Here is the coding for the paragraphs:

 Lorem ipsum...     Lorem ipsum...


 * 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.
 * NOTICE the text has changed to compensate for the additional space on the right and left sides. This is caused by the restriction on width, but would have if there was none.

LIMIT MARGINS
We can limit margins to one or more sides as we can with padding. Here are the margin attributes for each of the four sides:  PLEASE NOTE: You can also use negative margins.  For example if you want to move a paragraph up closer to the top of the article or section from where your browser placed it, you can use, say, margin-top:-25px. This will move the paragraph 25 pixels higher on the page or section.  Just be aware you could cover up something above it.  However, this is a good trick to know.
 * margin-top: 10px
 * margin-bottom: 10px
 * margin-right: 10px
 * margin-left: 10px

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

2. What is the code to change our lorem Ipsum paragraph in your sandbox to give it a background color of light blue with white text 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 page


 * A. True
 * B. False

Check your answers

<< Previous Chapter Next Chapter >>