<div>Block element takes full width</div>
<div>Each div starts on a new line</div>
<p>Paragraphs are also block elements</p>
<h1>Headings too!</h1>

[Each element on its own line, full width]

<p>
  This is <span>inline text</span> that flows 
  <strong>naturally</strong> with the 
  <em>surrounding content</em>.
</p>

[Text flows in a line with inline styling]

<style>
  .box-demo {
    width: 200px;
    padding: 20px;
    border: 5px solid blue;
    margin: 10px;
    background: lightgray;
  }
</style>

<div class="box-demo">Content</div>

[Box with margin → border → padding → content]

<style>
  .block-style {
    width: 300px;     /* Works on block */
    height: 100px;   /* Works on block */
    margin: 20px;    /* All sides work */
  }
  .inline-style {
    width: 300px;     /* Ignored on inline */
    height: 100px;   /* Ignored on inline */
    margin: 20px 0;  /* Top/bottom ignored */
  }
</style>

[Block elements respect all dimensions, inline elements don't]

<!-- Wrong: Block inside inline -->
<span><div>Not allowed!</div></span>

<!-- Wrong: Expecting inline to have block behavior -->
<span style="width: 200px;">Won't work</span>

<!-- Correct: Proper nesting -->
<div><span>This works fine</span></div>

<div class="article">
  <h2>Article Title</h2>
  <p>
    This article discusses <strong>important concepts</strong> 
    and includes <em>emphasized points</em>. You can 
    <span class="highlight">highlight specific text</span> 
    within the flow of content.
  </p>
  <div class="callout">
    <strong>Key Takeaway:</strong> Understanding element types 
    helps you structure content effectively.
  </div>
</div>

[Well-structured article with proper inline/block usage]