css - style - SPAN vs DIV(bloque en línea)

span inline style

Question

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

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

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

<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>

Answer 1

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 pantalla: en línea lo hace, pero puede manipular los atributos del cuadro del elemento (ancho, alto y márgenes verticales) como lo hace 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.

Answer 2

Como otros han respondido ... div es un "elemento de bloque" (ahora redefinido como contenido de flujo ) y span es un "elemento en línea" ( contenido de redacción ). Sí, puede cambiar la presentación predeterminada de estos elementos, pero existe una diferencia entre "flujo" y "bloqueo" y "fraseo" frente a "en línea".

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

Todos los elementos de fraseo, como strong y em , solo pueden contener otros elementos de fraseo: no se puede poner una table dentro de una cite por ejemplo. La mayoría del contenido de flujo como div y li pueden contener todo tipo de contenido de flujo (así como contenido de fraseo), pero hay algunas excepciones: p , pre y th son ejemplos de contenido de flujo que no verbaliza ("elementos de bloque") que solo puede contener contenido de fraseo ("elementos en línea"). Y, por supuesto, están las restricciones de elementos normales, como dl y solo se permite que la table contenga ciertos elementos.

Si bien tanto div como p son contenidos de flujo que no verbalizan, el div puede contener otros contenidos de flujo secundarios (incluidos más div s y p s). Por otro lado, p solo puede contener contenido de frase infantil. Eso significa que no puedes poner un div dentro de una p , a pesar de que ambos son elementos de flujo que no verbalizan.

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 div dentro de un span , obtendrá un error de validación incluso si tiene span {display: block;} y div {display: inline;} en su CSS.

Answer 3

Creo que te ayudará a comprender las diferencias básicas entre los elementos en línea (por ejemplo, span) y los elementos en bloque (por ejemplo, div), para comprender por qué "display: inline-block" es tan útil.

Problema : los elementos en línea (p. Ej., Span, a, button, input, etc.) toman "margin" solo verticalmente (margin-left y margin-right), no horizontalmente. 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 (superior e inferior). Motivo: elemento en línea Span, se comporta ahora como un elemento de bloque hacia el exterior, 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>

Answer 4

Sé que esta Q es antigua, pero ¿por qué no utilizar todos los DIV en lugar de los SPAN? Entonces todo juega todos felices 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>

Answer 5

Si quieres tener un documento xhtml válido, entonces no puedes poner un div dentro de un párrafo.

Además, un div con la pantalla de propiedades: el bloque en línea funciona de manera diferente a un lapso. Un tramo es por defecto un elemento en línea, no puede establecer el ancho, alto y otras propiedades asociadas con los bloques. Por otro lado, un elemento con la propiedad bloque en línea todavía "fluirá" con cualquier texto circundante, pero puede establecer propiedades como ancho, alto, etc. Un lapso 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 Inline-Block 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.

Aquí hay un excelente artículo sobre cómo crear elementos de bloque en línea cruzados.

Answer 6

De acuerdo con las especificaciones de HTML , <span> es un elemento en línea y <div> es un elemento de bloque. Ahora eso se puede cambiar usando la propiedad CSS de display , pero hay un problema: en términos de validación de HTML, no se pueden poner elementos de bloque dentro de elementos en línea de modo que:

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

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

Por lo tanto, si su elemento está en inline o inline-block utilice un <span> . Si se trata de un elemento de nivel de block , use un <div> .