Joanne's Blog

The Difference Between Div and Span

Joanne -

Type of Element

Div: block-level element

  • always starts on a new line
  • always takes full width available (stretches out to the left and right as far as it can)
  • has a top and a bottom margin

Span: inline element

  • does not start on a new line
  • only takes as much width as necessary
  • dose not have a top and a bottom margin

Example

<body>
    <h1>This Is Div</h1>
    <h2>Div starts on a new line, and takes full width available.</h2>
    <a href="https://blog.joannefei.com/">Joanne's Blog!</a>
    <div style="background-color: aliceblue;">Hello World</div>

    <h1>This Is Span</h1>
    <h2>Span dose not start on a new line, and only takes as much width as necessary.</h2>
    <a href="https://blog.joannefei.com/">Joanne's Blog!</a>
    <span style="background-color: antiquewhite;">Hello World</span>
</body>

Usage

Div

  • often used as a container for other HTML elements
  • can be used to style blocks of content when used together with CSS

Span

  • used to mark up a part of a text, or a part of a document
  • can be used to style parts of the text when used together with CSS

Example

<body>
    <div style="background-color: rosybrown;">
        <h1>This Is Div</h1>
        <h2>Div is used as a container for other HTML elements, and can be used to style blocks of content.</h2>
    </div>

    <h1>This Is Span</h1>
    <h2>Span is used to mark up <span style="color: red;">a part of a text, or a part of a document.</span></h2>
</body>

Reference

https://www.w3schools.com/html/html_blocks.asp