M2- Document flow- block vs. inline

Question 1

How does a web browser determine where to place elements on the screen?

Answer 1

The web browser uses a process called document flow to calculate the position of HTML elements on the screen.

Question 2

What are the two main categories of HTML elements in terms of their layout?

Answer 2

HTML elements are organized into two categories: block-level elements and inline elements.

Question 3

What is a block-level element?

Answer 3

A block-level element occupies the full horizontal width of its parent container and the vertical height of its content. It starts on a new line, and multiple block-level elements stack on top of each other.

Question 4

Can you give examples of block-level elements?

Answer 4

Examples include < div>, < form>, and heading tags like < h1>, < h2>, etc.

Question 5

What is an inline element?

Answer 5

An inline element only takes up as much width and height as its content needs. It does not start on a new line, meaning multiple inline elements can appear in a row.

Question 6

Can you give examples of inline elements?

Answer 6

Examples include < a>, < img>, < input>, < label>, < b>, < i>, and < span>.

Question 7

How does document flow affect the display of block and inline elements in a web browser?

Answer 7

Block-level elements will stack vertically like boxes, each on a new line, while inline elements will align horizontally within the same line of content.

Question 8

Can the behavior of elements (block or inline) be changed? If so, how?

Answer 8

Yes, the behavior can be changed using the display CSS property. You can set an element to display as block or inline.

display: inline