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

CSS Tutorials - Width of a Parent Element

By: FYICenter.com

(Continued from previous topic...)

How Is the Width of a Parent Element Related to Child Elements?

If child block elements are enclosed in a parent block element, the width of the parent element is related to child block elements based on the following 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.
  • The full width of a stack of block elements is the maximum value of full widths of block elements in the stack.
  • The final width of the parent element equals to the final full width of the stack of the all child elements.
  • If the width of the parent element is not specified, the final width of the parent element will be set to the full width of the child stack.
  • If the width of the parent element is specified and greater than the full width of the child stack. the full width of the child stack will be extended match the specified width of the parent element.
  • If the width of the parent element is specified and less than the full width of the child stack. the width of the parent element will be extended match the full width of the child stack.

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