SPAN vs DIV inline-block

Question

Is there any reason to use a  lt div style  display inline-block  gt  instead of a  lt span gt  to layout a webpage   Can I put content nested inside the span  What is valid and what isn t   It s ok to use this to make a 3x2 table like layout    lt div gt      lt span gt  content1 divs p  spans  etc   lt  span gt      lt span gt  content2 divs p  spans  etc   lt  span gt      lt span gt  content3 divs p  spans  etc   lt  span gt   lt  div gt   lt div gt      lt span gt  content4 divs p  spans  etc   lt  span gt      lt span gt  content5 divs p  spans  etc   lt  span gt      lt span gt  content6 divs p  spans  etc   lt  span gt   lt  div gt

User · Answer

I think it will help you to understand the basic differences between Inline-Elements (e.g. span) and Block-Elements (e.g. div), in order to understand why "display: inline-block" is so useful.

Problem: inline elements (e.g. span, a, button, input etc.) take "margin" only horizontally (margin-left and margin-right) on, not vertically. Vertical spacing works only on block elements (or if "display:block" is set)

Solution: Only through "display: inline-block" will also take the vertical distance (top and bottom). Reason: Inline element Span, behaves now like a block element to the outside, but like an inline element inside

Here Code Examples:

_x000D_

 /* Inlineelement */

        div,
        span {
            margin: 30px;
        }

        span {
            outline: firebrick dotted medium;
            background-color: antiquewhite;
        }

        span.mitDisplayBlock {
            background: #a2a2a2;
            display: block;
            width: 200px;
            height: 200px;
        }

        span.beispielMargin {
            margin: 20px;
        }

        span.beispielMarginDisplayInlineBlock {
            display: inline-block;
        }

        span.beispielMarginDisplayInline {
            display: inline;
        }

        span.beispielMarginDisplayBlock {
            display: block;
        }

        /* Blockelement */

        div {
            outline: orange dotted medium;
            background-color: deepskyblue;
        }

        .paddingDiv {
            padding: 20px;
            background-color: blanchedalmond;
        }

        .marginDivWrapper {
            background-color: aliceblue;

        }

        .marginDiv {
            margin: 20px;
            background-color: blanchedalmond;
        }
    </style>
    <style>
        /* Nur für das w3school Bild */

        #w3_DIV_1 {
            bottom: 0px;
            box-sizing: border-box;
            height: 391px;
            left: 0px;
            position: relative;
            right: 0px;
            text-size-adjust: 100%;
            top: 0px;
            width: 913.984px;
            perspective-origin: 456.984px 195.5px;
            transform-origin: 456.984px 195.5px;
            background: rgb(241, 241, 241) none repeat scroll 0% 0% / auto padding-box border-box;
            border: 2px dashed rgb(187, 187, 187);
            font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
            padding: 45px;
            transition: all 0.25s ease-in-out 0s;
        }

        /*#w3_DIV_1*/

        #w3_DIV_1:before {
            bottom: 349.047px;
            box-sizing: border-box;
            content: '"Margin"';
            display: block;
            height: 31px;
            left: 0px;
            position: absolute;
            right: 0px;
            text-align: center;
            text-size-adjust: 100%;
            top: 6.95312px;
            width: 909.984px;
            perspective-origin: 454.984px 15.5px;
            transform-origin: 454.984px 15.5px;
            font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
        }

        /*#w3_DIV_1:before*/

        #w3_DIV_2 {
            bottom: 0px;
            box-sizing: border-box;
            color: black;
            height: 297px;
            left: 0px;
            position: relative;
            right: 0px;
            text-decoration: none solid rgb(255, 255, 255);
            text-size-adjust: 100%;
            top: 0px;
            width: 819.984px;
            column-rule-color: rgb(255, 255, 255);
            perspective-origin: 409.984px 148.5px;
            transform-origin: 409.984px 148.5px;
            caret-color: rgb(255, 255, 255);
            background: rgb(76, 175, 80) none repeat scroll 0% 0% / auto padding-box border-box;
            border: 0px none rgb(255, 255, 255);
            font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
            outline: rgb(255, 255, 255) none 0px;
            padding: 45px;
        }

        /*#w3_DIV_2*/

        #w3_DIV_2:before {
            bottom: 258.578px;
            box-sizing: border-box;
            content: '"Border"';
            display: block;
            height: 31px;
            left: 0px;
            position: absolute;
            right: 0px;
            text-align: center;
            text-size-adjust: 100%;
            top: 7.42188px;
            width: 819.984px;
            perspective-origin: 409.984px 15.5px;
            transform-origin: 409.984px 15.5px;
            font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
        }

        /*#w3_DIV_2:before*/

        #w3_DIV_3 {
            bottom: 0px;
            box-sizing: border-box;
            height: 207px;
            left: 0px;
            position: relative;
            right: 0px;
            text-size-adjust: 100%;
            top: 0px;
            width: 729.984px;
            perspective-origin: 364.984px 103.5px;
            transform-origin: 364.984px 103.5px;
            background: rgb(241, 241, 241) none repeat scroll 0% 0% / auto padding-box border-box;
            font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
            padding: 45px;
        }

        /*#w3_DIV_3*/

        #w3_DIV_3:before {
            bottom: 168.344px;
            box-sizing: border-box;
            content: '"Padding"';
            display: block;
            height: 31px;
            left: 3.64062px;
            position: absolute;
            right: -3.64062px;
            text-align: center;
            text-size-adjust: 100%;
            top: 7.65625px;
            width: 729.984px;
            perspective-origin: 364.984px 15.5px;
            transform-origin: 364.984px 15.5px;
            font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
        }

        /*#w3_DIV_3:before*/

        #w3_DIV_4 {
            bottom: 0px;
            box-sizing: border-box;
            height: 117px;
            left: 0px;
            position: relative;
            right: 0px;
            text-size-adjust: 100%;
            top: 0px;
            width: 639.984px;
            perspective-origin: 319.984px 58.5px;
            transform-origin: 319.984px 58.5px;
            background: rgb(191, 201, 101) none repeat scroll 0% 0% / auto padding-box border-box;
            border: 2px dashed rgb(187, 187, 187);
            font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
            padding: 20px;
        }

        /*#w3_DIV_4*/

        #w3_DIV_4:before {
            box-sizing: border-box;
            content: '"Content"';
            display: block;
            height: 73px;
            text-align: center;
            text-size-adjust: 100%;
            width: 595.984px;
            perspective-origin: 297.984px 36.5px;
            transform-origin: 297.984px 36.5px;
            font: normal normal 400 normal 21px / 73.5px Lato, sans-serif;
        }

        /*#w3_DIV_4:before*/

_x000D_

   <h1> The Box model - content, padding, border, margin</h1>
    <h2> Inline element - span</h2>
    <span>Info: A span element can not have height and width (not without "display: block"), which means it takes the fixed inline size </span>

    <span class="beispielMargin">
        <b>Problem:</b> inline elements (eg span, a, button, input etc.) take "margin" only vertically (margin-left and margin-right)
        on, not horizontal. Vertical spacing works only on block elements (or if display: block is set) </span>

    <span class="beispielMarginDisplayInlineBlock">
        <b>Solution</b> Only through
        <b> "display: inline-block" </ b> will also take the vertical distance (top and bottom). Reason: Inline element Span,
        behaves now like a block element to the outside, but like an inline element inside</span>

    <span class="beispielMarginDisplayInline">Example: here "display: inline". See the margin with Inspector!</span>

    <span class="beispielMarginDisplayBlock">Example: here "display: block". See the margin with Inspector!</span>

    <span class="beispielMarginDisplayInlineBlock">Example: here "display: inline-block". See the margin with Inspector! </span>

    <span class="mitDisplayBlock">Only with the "Display" -property and "block" -Value in addition, a width and height can be assigned. "span" is then like
        a "div" block element.  </span>

    <h2>Inline-Element - Div</h2>
    <div> A div automatically takes "display: block." </ div>
    <div class = "paddingDiv"> Padding is for padding </ div>

    <div class="marginDivWrapper">
Wrapper encapsulates the example "marginDiv" to clarify the "margin" (distance from inner element "marginDiv" to the text)
        of the outer element "marginDivWrapper". Here 20px;)
        
    <div class = "marginDiv"> margin is for the margins </ div>
        And there, too, 20px;
    </div>

    <h2>w3school sample image </h2>
    source:
    <a href="https://www.w3schools.com/css/css_boxmodel.asp">CSS Box Model</a>
    <div id="w3_DIV_1">
        <div id="w3_DIV_2">
            <div id="w3_DIV_3">
                <div id="w3_DIV_4">
                </div>
            </div>
        </div>
    </div>

_x000D_

User · Answer

If you want to have a valid xhtml document then you cannot put a div inside of a paragraph    Also  a div with the property display  inline-block works differently than a span  A span is by default an inline element  you cannot set the width  height  and other properties associated with blocks  On the other hand  an element with the property inline-block will still  flow  with any surrounding text but you may set properties such as width  height  etc  A span with the property display block will not flow in the same way as an inline-block element but will create a carriage return and have default margin    Note that inline-block is not supported in all browsers  For instance in Firefox 2 and less you must use   display  -moz-inline-stack    which displays slightly different than an inline block element in FF3   There is a great article here on creating cross browser inline-block elements

User · Answer

I know this Q is old  but why not use all DIVs instead of the SPANs  Then everything plays all happy together   Example    lt div gt       lt div gt  content1 divs p  spans  etc   lt  div gt       lt div gt  content2 divs p  spans  etc   lt  div gt       lt div gt  content3 divs p  spans  etc   lt  div gt    lt  div gt    lt div gt       lt div gt  content4 divs p  spans  etc   lt  div gt       lt div gt  content5 divs p  spans  etc   lt  div gt       lt div gt  content6 divs p  spans  etc   lt  div gt    lt  div gt

User · Answer

As others have answered    div is a    block element     now redefined as Flow Content  and span is an    inline element     Phrasing Content   Yes  you may change the default presentation of these elements  but there is a difference between    flow    versus    block     and    phrasing    versus    inline      An element classified as flow content can only be used where flow content is expected  and an element classified as phrasing content can be used where phrasing content is expected  Since all phrasing content is flow content  a phrasing element can also be used anywhere flow content is expected  The specs provide more detailed info   All phrasing elements  such as strong and em  can only contain other phrasing elements  you can   t put a table inside a cite for instance  Most flow content such as div and li can contain all types of flow content  as well as phrasing content   but there are a few exceptions  p  pre  and th are examples of non-phrasing flow content     block elements     that can only contain phrasing content     inline elements      And of course there are the normal element restrictions such as dl and table only being allowed to contain certain elements   While both div and p are non-phrasing flow content  the div can contain other flow content children  including more divs and ps   On the other hand  p may only contain phrasing content children  That means you can   t put a div inside a p  even though both are non-phrasing flow elements   Now here   s the kicker  These semantic specifications are unrelated to how the element is displayed  Thus  if you have a div inside a span  you will get a validation error even if you have span  display  block   and div  display  inline   in your CSS

User · Answer

According to the HTML spec   lt span gt  is an inline element and  lt div gt  is a block element  Now that can be changed using the display CSS property but there is one issue  in terms of HTML validation  you can t put block elements inside inline elements so    lt p gt     lt div gt foo lt  div gt     lt  p gt    is not strictly valid even if you change the  lt div gt  to inline or inline-block   So  if your element is inline or inline-block use a  lt span gt   If it s a block level element  use a  lt div gt

User · Answer

Inline-block is a halfway point between setting an element   s display to inline or to block  It keeps the element in the inline flow of the document like display inline does  but you can manipulate the element   s box attributes  width  height and vertical margins  like you can with display block  We must not use block elements within inline elements  This is invalid and there is no reason to do such practices

[css] SPAN vs DIV (inline-block)

Examples related to css

Examples related to html