Block-level vs inline elements

Basis	Block-level	Inline
Line behaviour	Starts on a new line; the next element also goes below	Flows within the line beside other content
Width	Takes the full available width by default	Takes only the width of its content
Width/height/vertical margin	Can be set	width, height, and vertical margin/padding do not affect layout
Can contain	Block and inline elements	Text and other inline elements only
Default display	block	inline
Examples	<div>, <p>, <h1>–<h6>, <ul>, <ol>, <li>, <table>, <form>, <section>	<span>, <a>, <strong>, <em>, <img>, <label>, <code>

Example

<div style="background:#cde">Block A</div>
<div style="background:#fdc">Block B</div>

<p>This paragraph has <span style="color:red">inline red text</span>
and a <a href="#">link</a> in the same line.</p>

Block A and Block B appear on separate lines, each spanning the full width. The <span> and <a> stay inside the paragraph's line.

Effect on layout and rendering

• Block elements build the page structure: stacking sections, headings, paragraphs, and lists vertically.
• Inline elements style or link parts of text without breaking the flow.
• The box model (margin, border, padding, width, height) applies fully to blocks; for inline elements only horizontal spacing works.
• Line-height and baseline alignment govern how inline items are laid out; whitespace between inline elements shows as a small gap.
• CSS display can change behaviour:
  • display:block makes an inline element behave like a block.
  • display:inline does the reverse.
  • display:inline-block flows in a line but accepts width and height (useful for buttons and nav items).
  • display:flex/grid create modern layouts.

a.button { display: inline-block; width: 120px; padding: 8px; }

Choosing correctly avoids layout bugs such as unexpected line breaks or ignored width/height.