Question

In many places I have put elmeents nested in other elements. I can’t deduce when a child element causes the parent element to expand. I don’t have any code to post as this is a general conceptual question so that I can design as needed.

Answer 1

The first thing that you should understand is the CSS Box Model. That will help you understand how properties of an element cause it to have the size and dimensions that it has. Another good resource is here.

To answer your main question in the most simple manner (and being very general):

• Block level elements take up as much width as possible (obeying their CSS width rule). Their height is dependent on their content and the CSS height property.
  • Elements like div, p, and ul are all block.
  • These will generally cause your parent element to expand.
• Inline level elements will continue to flow together in a line, filling up only as much width and height as necessary.
  • Elements like span, em, strong are all inline.
  • These will cause your parent element to expand only when there are enough of them on the same line to warrant another line.

There are many ways to tweak the display of elements with CSS.