This is paragraph #1. In this paragraph, the margin is set to 100px, and the border is set to a blue ridge of 10px. The margin is outside of the border.
This is paragraph #2. In paragraph, the margin is set to 0px, so no margin, and the border is set to a blue ridge of 10px. Compare this to paragraph #1.
This is paragraph #3. In this paragraph, the margin is set to 100px, and the border is set to a blue ridge of 10px. The padding is set to 25px, while the padding of paragraphs #1 and #2 is 0px.
This is paragraph #4. In this paragraph, the margin is set to 150px, and the border is set to a blue ridge of 10px. The padding is set to 25px. Note that the margins between the 3rd and 4th paragraphs are NOT added together. Instead the largest margin of the two shared margins becomes the value of the shared margin. Therefore, the shared margin is 150px. The shared margin is NOT 250px (100px + 150px).
For the h2 element above, the width is set to 50% and the text-align is "center". Note that it is NOT centered.
For the h2 element above, the width is set to 50% and the text-align is "center". Note that it is centered. To center an element, you need to use the "auto" value for the margin property. Set both the right and left margins of the element to "auto".
For the h2 element above, the width is set to 50%, the left and right margins are set to "auto", but the text-align is "right". So the element is centered, but the text is on the right.
Click to validate the HTML code
Click to validate the CSS code