display:block inside display:inline

Question

I want to understand what happens when an element whose CSS is display:block is a DOM child of an element whose CSS is display:inline (so that the

Answer 1

It sometimes depends on the exact css defined or browser.

Most commonly, I've seen two behaviors:

• The display:block element inside display:inline element makes the display:inline act like a display:block with width:100%.

• A display:inline element containing only display:block float:left or float:right elements takes no space, and is as if there were no elements inside of it. The display:block elements act as if they where inside another display:block element, sometimes having funky actions depending on position.

Both position and float make the child elements have sometimes bizarre behaviors, but avoiding them make them work generally as if they were inline.