User:Stais/Sandbox/Margins and Borders

Padding, Div Tags-Intro, Margins, Borders Lesson 22 Padding The padding attributes for each of the four sides are:


 * padding-top:10px
 * padding-bottom:10px
 * padding-right:10px
 * padding-left:10px


 * 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.

 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.


 * 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?

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.

Lesson 23 Div Tags-Intro Div tags are used more than paragraph tags and are the workhorse of the Wiki. It works just a like a paragraph tag but does not have any built in spacing.

Copy and paste our lorem ipsum paragraphs twice with the first one with a background color of "moccasin" and the second one with a color "crimson," both with a padding of 20 pixels, but using div tags instead of paragraph 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.

Lesson 24 Margins Margin Attribute:


 * Margins are rather like padding only the spacing takes place outside the boundaries not inside the boundaries 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[1] 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.

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:


 * margin-top:10px
 * margin-bottom:10px
 * margin-right:10px
 * margin-left:10px

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

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

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.

Lesson 25 Borders

Attribute: border-bottom:1px solid red
 * Instead of using background colors to show the space taken up by a paragraph, we can use borders.
 * We can place borders on one, two, three or on all four sides just like padding and margins.


 * Padding and margin attributes work the same way with borders.
 * Padding will separate the text from the edge of the div or paragraph tag container.
 * Margins will separate div and paragraph tags from each other.

Border radius The corners on boxes are square by default, but you can make them rounded by using this coding: border-radius:5px


 * border-top-left-radius:5px
 * border-bottom-left-radius:5px
 * border-top-right-radius:5px
 * border-bottom-right-radius:5px

Border shadow (AKA box-shadows) box-shadow:10px 10px 5px #888888


 * The first 10 pixels is the distance from the right edge of the box to the edge of the shadow.
 * The second 10 pixels is the distance from the bottom edge of the box to the edge of the shadow.
 * The 5 pixels is the distance the box is ABOVE the page. The greater the distance the fuzzier is the shadow. The closer the box is to the page the darker is the shadow.
 * The #888888 is, of course, the HEX number for the color of the shadow, which is a dark gray in this example.

Effect of borders on width of element

When a border is added to an element such as a div tag, the area of the div tag if it is called out will remain. If a container is 640 pixels wide and a 50 pixel border is added, the whole element will expand to 740 pixels and expand into the right sidebars. So if you are adding thick borders, you need to assess how it will affect the width of the entire element.

Using a div tag put a border around our lorem ipsum paragraph of a "groove" type that is 10 pixels thick with whatever color you like.

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.

Using a div tag put a border around our lorem ipsum paragraph of a "ridge" type that is 15 pixels thick with whatever color you like:

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.