SPAN vs DIV (bloqueo en línea)

140

¿Hay alguna razón para usar un en <div style="display:inline-block">lugar de un <span>para diseñar una página web?

¿Puedo poner contenido anidado dentro del intervalo? ¿Qué es válido y qué no?

¿Está bien usar esto para hacer una tabla de 3x2 como diseño?

<div>
   <span> content1(divs,p, spans, etc) </span>
   <span> content2(divs,p, spans, etc) </span>
   <span> content3(divs,p, spans, etc) </span>
</div>
<div>
   <span> content4(divs,p, spans, etc) </span>
   <span> content5(divs,p, spans, etc) </span>
   <span> content6(divs,p, spans, etc) </span>
</div>
css html blackjid
fuente
16
Si va a buscar un documento xhtml válido, no puede colocar elementos de nivel de bloque dentro de elementos en línea.
moorej
1
wiki en elementos html es.wikipedia.org/wiki/HTML_element
moorej

Respuestas:

187

Según la especificación HTML , <span>es un elemento en línea y <div>es un elemento de bloque. Ahora eso se puede cambiar usando la displaypropiedad CSS, pero hay un problema: en términos de validación HTML, no se pueden poner elementos de bloque dentro de elementos en línea, por lo tanto:

<p>...<div>foo</div>...</p>

no es estrictamente válido incluso si cambia <div>a inlineo inline-block.

Entonces, si tu elemento es inlineo inline-blockusa a <span>. Si es un blockelemento de nivel, use a <div>.

cletus
fuente
1
Sí, puede estilo de un palmo y hacer que se comporte como un div
David
1
Tiendo a estar de acuerdo en que inline-blocktiene una relación más estrecha con la inlineque block.
Bob Aman el
11
La pregunta original se refería a lo que es válido y para la validación, <span>y de <div>hecho son diferentes, ya que <span>es un elemento en línea (válido dentro de a <p>, por ejemplo), mientras que <div>es un elemento de bloque (no válido dentro de a <p>).
Brian Campbell
8
@cletus no es <p> un elemento de bloque?
Aris
8
<p>es un elemento de bloque que "no puede contener elementos de nivel de bloque" ( enlace ), por lo que si bien el ejemplo no es válido, no es porque <p>esté en línea.
Pero P.
19

Si desea tener un documento xhtml válido, no puede poner un div dentro de un párrafo.

Además, un div con la visualización de la propiedad: inline-block funciona de manera diferente que un span. Un intervalo es, por defecto, un elemento en línea, no puede establecer el ancho, la altura y otras propiedades asociadas con los bloques. Por otro lado, un elemento con la propiedad inline-block seguirá "fluyendo" con cualquier texto circundante, pero puede establecer propiedades como ancho, alto, etc. Un intervalo con la visualización de propiedades: el bloque no fluirá de la misma manera como un elemento de bloque en línea, pero creará un retorno de carro y tendrá un margen predeterminado.

Tenga en cuenta que el bloqueo en línea no es compatible con todos los navegadores. Por ejemplo, en Firefox 2 y menos debes usar:

display: -moz-inline-stack;

que se muestra ligeramente diferente a un elemento de bloque en línea en FF3.

Hay un gran artículo aquí en la creación de elementos inline-block cruz navegador.

moorej
fuente
-moz-inline-block hace inline-block no.
moorej
Si desea que se muestre más como un bloque en línea en FF3, debería usar también inline-stack.
moorej
+1 para el enlace muy interesante. Ha habido momentos en que el bloqueo en línea habría resuelto una serie de problemas.
Tom
5

  1. Inline-block es un punto intermedio entre configurar la visualización de un elemento en línea o bloquear. Mantiene el elemento en el flujo en línea del documento como display: inline lo hace, pero puede manipular los atributos del cuadro del elemento (ancho, alto y márgenes verticales) como puede hacerlo con display: block.

  2. No debemos usar elementos de bloque dentro de elementos en línea. Esto no es válido y no hay razón para hacer tales prácticas.

Touhid Rahman
fuente
3

Sé que esta Q es antigua, pero ¿por qué no usar todos los DIV en lugar de los SPAN? Entonces todo juega todo feliz juntos.

Ejemplo:

<div> 
   <div> content1(divs,p, spans, etc) </div> 
   <div> content2(divs,p, spans, etc) </div> 
   <div> content3(divs,p, spans, etc) </div> 
</div> 
<div> 
   <div> content4(divs,p, spans, etc) </div> 
   <div> content5(divs,p, spans, etc) </div> 
   <div> content6(divs,p, spans, etc) </div> 
</div>
JMJ
fuente
1
Creo que el objetivo es mantener todo lo más delgado y semántico posible. Entonces, si tiene un encabezado y desea un envoltorio interno div, podría <em> parecer </em> más semántico tener: encabezado {} y intervalo de encabezado {}, entonces tendría encabezado {} y .inner {} . Sin embargo ... si usa el .inner, puede usarlo muchas veces; lo más probable es que los tramos tengan que tener un estilo independiente. En pocas palabras: desea utilizar el menor marcado posible, por lo que las personas están tratando de encontrar formas de evitar div> div> div> div> div, etc.
sheriffderek
3

Creo que le ayudará a comprender las diferencias básicas entre Inline-Elements (por ejemplo, span) y Block-Elements (por ejemplo, div), para comprender por qué "display: inline-block" es tan útil.

Problema : los elementos en línea (por ejemplo, span, a, botón, entrada, etc.) toman el "margen" solo horizontalmente (margen izquierdo y margen derecho), no verticalmente. El espaciado vertical solo funciona en elementos de bloque (o si se establece "display: block")

Solución : Solo a través de "display: inline-block" también tomará la distancia vertical (arriba y abajo). Motivo: el elemento en línea Span, ahora se comporta como un elemento de bloque hacia afuera, pero como un elemento en línea dentro

Aquí ejemplos de código:

 /* 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*/
   <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>
Expandir fragmento

Birol Efe
fuente
2

Como otros han respondido ... dives un "elemento de bloque" (ahora redefinido como Contenido de flujo ) y spanes un "elemento en línea" ( Contenido de fraseo ). Sí, puede cambiar la presentación predeterminada de estos elementos, pero hay una diferencia entre "flujo" versus "bloque" y "fraseo" versus "en línea".

Un elemento clasificado como contenido de flujo solo puede usarse donde se espera contenido de flujo, y un elemento clasificado como contenido de fraseo puede usarse donde se espera contenido de fraseo. Dado que todo el contenido de redacción es contenido de flujo, un elemento de redacción también se puede utilizar en cualquier lugar donde se espere contenido de flujo. Las especificaciones proporcionan información más detallada .

Todos los elementos de redacción, como strongy em, solo pueden contener otros elementos de redacción: por ejemplo, no puede poner un tabledentro cite. La mayoría de flujo contenido como divy lipuede contener todos los tipos de contenido de flujo (así como fraseo contenido), pero hay algunas excepciones: p, pre, y thson ejemplos de contenido de flujo no fraseo ( “elementos de bloque”) que pueden solamente contener frases contenido ("elementos en línea"). Y, por supuesto son las restricciones de los elementos normales, tales como dly tablesolamente está permitido para contener ciertos elementos.

Mientras tanto divy pson no fraseo contenido de flujo, el divpuede contener otros niños de contenido de flujo (incluyendo más divs y ps). Por otro lado, psolo puede contener contenido de frase infantil. Eso significa que no puede poner un divdentro de p, a pesar de que ambos son elementos de flujo sin fraseo.

Ahora aquí está el pateador. Estas especificaciones semánticas no están relacionadas con la forma en que se muestra el elemento. Por lo tanto, si tiene un diva span, obtendrá un error de validación incluso si lo tiene span {display: block;}y div {display: inline;}en su CSS.

chharvey
fuente
¿Qué pasa con el bloque en línea dentro del bloque en línea y dentro del bloque en línea?
user764754
@ user764754 siempre que cumpla con las especificaciones, puede diseñar cualquier elemento como desee y seguirá siendo válido. ( inline-blockes un estilo CSS, no un tipo de elemento o modelo de contenido)
chharvey