How do inline elements differ from block elements?

Inline elements and block elements differ in their behavior in the document flow.

---

#Block elements

• take up the full available width of the line;
• always start on a new line;
• can have width, height, margin, and padding set on all sides;
• push neighbors above and below.

Example: div, p, h1-h6, ul, li.

---

#Inline elements

• take up only the width of their content;
• do not wrap to a new line (sit in the line alongside others);
• cannot have width and height set (they are ignored);
• vertical margin and padding are partially accounted for and do not affect the flow the way they do for blocks.

Example: span, a, strong, em.

---

#The gist in one sentence:

• block, a block-level element, forms a rectangular block and wraps the line
• inline, an inline-level element, lives within the line and does not break it