Help:Wiki University Wikitext--Margins

Consider the paragraph from the previous lesson. 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. Notice the space between the text and the edge of the background. The text is right up against the borders of the background. A little space between the text and the edge of the background would probably help it to look better.

Padding attribute
To add a little space between the text and the edge of the background border, we use the padding attribute:  Here is our paragraph with 10 pixel padding on all four sides: 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.
 * The padding is on all four sides of the paragraph.
 * Padding is called out in pixels.
 * That does look better.

Limit padding
We can limit padding to one or more sides. To pad only on the left side use: padding-left:10px, for example. 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.

On two sides, you could use: padding-right:10px and padding-top:10px. The padding attributes for each of the four sides are:
 * Notice padding is only on the left side.
 * padding-top:10px
 * Padding-bottom:10px
 * padding-right:10px
 * padding-left:10px

 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 padding on the top and bottom of 20 pixels.

2. Then load our lorem ipsum paragraph twice with no background color and no text color but with a padding-bottom of the first paragraph of 100px. What happens to the space between the paragraphs? Check your answers >

 Quick Quiz
 * To have the text 20px from the left edge of the background what attribute do you use?
 * A. padding:20px
 * B. padding-right:20px
 * C. padding-left:20px


 * To have the background 50px from all side of the text, what attribute do you use?
 * A. padding-right:50px
 * B. padding-top:50px
 * C. None of the above

Check your answers >