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

CSS Tutorials - Extending the Full Width of a Block Element

By: FYICenter.com

(Continued from previous topic...)

How Is the Full Width of a Block Element Extended?

If the full width of a block element needs to be extended to meet the width of the parent element, brower will following there rules:

  • The full width of a block element is the sum of left margin, left border, left padding, width, right padding, right border, and right margin.
  • There are only 3 out of the 7 horizontal spacing properties can to assigned with the value of "auto": left margin, width, and right margin.
  • If none of the 7 horizontal spacing properties is assigned to "auto", right margin will be extended to meet the full width extension requirement.
  • If right margin is assigned to "auto", it will be extended to meet the full width extension requirement.
  • If right margin is not assigned to "auto", and one or more other properties are assigned to "auto", other properties will be extended to meet the full width extension requirement.
  • (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?

    Selected Developer Jobs:

    More...