HTML-BLOCK-AND-INLINE

Question 1

How do block-level elements affect the document flow?

Answer 1

By default, block elements will consume all of the space in the inline direction, so the paragraphs spread out and get as big as they can inside their containing block. Its content fills the available inline space of the parent element containing it and grows along the block dimension to accommodate its content.

(Note: Additional spaces have been added here and there to abide by the website’s display rules. [Cannot display code without premium version])

Question 2

How do inline elements affect the document flow?

Answer 2

The size of Inline elements just is the size of their content. You can’t set width or height on inline elements — they just sit inside the content of block-level elements. If you want to control the size of an inline element in this manner, you need to set it to behave like a block-level element (e.g., with display: block; or display: inline-block;, which mixes characteristics from both.)

Question 3

What are the default width and height of a block-level element?

Answer 3

A block-level element expands to a width of 100% of its parent container. It will also expand by default to whatever height it needs to have.

Question 4

What are the default width and height of an inline element?

Answer 4

The height and width of an inline element is exactly the height and width of the content.