Home >> Tutorials/FAQs >> CSS Tutorials >> Index

CSS Tutorials - Why Is the Top Margin Not Showing

By: FYICenter.com

(Continued from previous topic...)

Why Is the Top Margin Not Showing?

If you are expecting a top margin to show up, and it is not showing up, it's probably because of the vertical margins collapsed due the following rules:

• Between two block elements - The bottom margin of the upper element and the top margin of the lower element are collapsed into one. The taller element wins. One margin will not show up.
• Between a parent element and a child element - The top padding of the parent element and the top margin of the child element are collapsed into one. The taller element wins. The padding or the margin will not show up.

(Continued on next topic...)

1. How Many Ways Can Elements Relate to Each Other?
2. How In-line Elements Are Formatted Side by Side?
3. How Nested Block Elements Are Formatted?
4. How Two Block Elements Are Formatted as a Stack?
5. How Floating Elements Are Formatted?
6. Why Is the Top Margin Not Showing?
7. How Are Vertical Margins between Two Block Elements Collapsed?
8. How Are Parent Padding Spaces Collapsed with the Child Margins?
9. How Is the Width of a Parent Element Related to Child Elements?
10. How Is the Full Width of a Block Element Extended?
11. How To Test Child Full Width Extension?
12. How To Test Parent Content Width Extension?
13. What Are White Spaces in HTML Documents?
14. How White Spaces Are Formatted?
15. What Happens to Multiple White Spaces in In-line Elements?