SPAN vs DIV (bloco em linha)

140

Existe algum motivo para usar um em <div style="display:inline-block">vez de um <span>para fazer o layout de uma página da web?

Posso colocar o conteúdo aninhado dentro do intervalo? O que é válido e o que não é?

Tudo bem usar isso para criar uma tabela 3x2 como layout?

<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
fonte
16
Se você estiver procurando por um documento xhtml válido, não poderá colocar elementos no nível do bloco dentro dos elementos inline.
moorej
1
wiki sobre elementos html en.wikipedia.org/wiki/HTML_element
moorej 23/10/09

Respostas:

187

De acordo com a especificação HTML , <span>é um elemento embutido e <div>é um elemento de bloco. Agora isso pode ser alterado usando a displaypropriedade CSS, mas há um problema: em termos de validação HTML, você não pode colocar elementos de bloco dentro de elementos inline, portanto:

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

não é estritamente válido, mesmo se você alterar <div>para inlineou inline-block.

Portanto, se o seu elemento for inlineou inline-blockuse a <span>. Se for um blockelemento de nível, use a <div>.

cleto
fonte
1
sim, você pode estilizar um palmo e torná-lo comportar-se como uma div
Dave
1
Costumo concordar que inline-blocktem um relacionamento mais próximo do inlineque block.
23410 Bob Aman
11
A pergunta original perguntou sobre o que é válido, e para validação, <span>e de <div>fato é diferente, como <span>é um elemento embutido (válido dentro de um <p>, por exemplo), enquanto <div>é um elemento de bloco (não válido dentro de um <p>).
27909 Brian Campbell
8
@cletus não é <p> um elemento de bloco?
Aris
8
<p>é um elemento de bloco que "não pode conter elementos em nível de bloco" ( link ); portanto, embora o exemplo seja inválido, não <p>é porque está embutido.
Pero P.
19

Se você deseja ter um documento xhtml válido, não pode colocar uma div dentro de um parágrafo.

Além disso, uma div com a propriedade display: inline-block funciona de maneira diferente de uma extensão. Uma extensão é, por padrão, um elemento embutido; você não pode definir a largura, a altura e outras propriedades associadas aos blocos. Por outro lado, um elemento com a propriedade inline-block ainda "flui" com qualquer texto circundante, mas você pode definir propriedades como largura, altura etc. Uma extensão com a exibição da propriedade: block não fluirá da mesma maneira como um elemento de bloco embutido, mas criará um retorno de carro e terá margem padrão.

Observe que o bloco embutido não é suportado em todos os navegadores. Por exemplo, no Firefox 2 e menos, você deve usar:

display: -moz-inline-stack;

que é exibido ligeiramente diferente de um elemento de bloco embutido no FF3.

Há um ótimo artigo aqui sobre a criação de elementos de bloco em linha entre navegadores.

moorej
fonte
-moz-inline-block não inline-block não.
moorej 23/10/09
Se você deseja exibir mais como o bloco embutido no FF3, também deve usar a pilha embutida.
moorej 23/10/09
+1 para o link muito interessante. Houve momentos em que o bloqueio em linha teria resolvido vários problemas.
Tom
5

  1. Bloco embutido é um ponto intermediário entre definir a exibição de um elemento como embutido ou bloqueado. Ele mantém o elemento no fluxo inline do documento como display: inline mantém, mas você pode manipular os atributos da caixa do elemento (largura, altura e margens verticais) como você pode com o display: block.

  2. Não devemos usar elementos de bloco dentro de elementos embutidos. Isso é inválido e não há razão para fazer essas práticas.

Touhid Rahman
fonte
3

Eu sei que este Q é antigo, mas por que não usar todos os DIVs em vez dos SPANs? Então tudo toca feliz juntos.

Exemplo:

<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
fonte
1
Penso que o objetivo é manter tudo o mais enxuto e semântico possível. Portanto, se você tem um cabeçalho e deseja uma div de invólucro interno - pode parecer <em> </em> mais semântico ter: cabeçalho {} e extensão do cabeçalho {}, então deveria ter o cabeçalho {} e o .inner {} . No entanto ... se você usar o .inner, poderá usá-lo várias vezes - os spans provavelmente terão que ter um estilo independente. Bottom line - você quer usar o mínimo de marcação quanto possível - para que as pessoas estão tentando descobrir maneiras de evitar div> div> div> div> div etc.
sheriffderek
3

Eu acho que isso ajudará você a entender as diferenças básicas entre elementos em linha (por exemplo, span) e elementos em bloco (por exemplo, div), para entender por que "display: inline-block" é tão útil.

Problema : os elementos embutidos (por exemplo, span, a, botão, entrada etc.) mantêm a "margem" apenas horizontalmente (margem esquerda e margem direita), não na vertical. O espaçamento vertical funciona apenas em elementos de bloco (ou se "display: block" estiver definido)

Solução : Somente através de "display: inline-block" também terá a distância vertical (superior e inferior). Razão: Elemento inline Span, agora se comporta como um elemento de bloco para o exterior, mas como um elemento inline dentro

Aqui estão exemplos 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 snippet

Birol Efe
fonte
2

Como outros responderam ... divé um "elemento de bloco" (agora redefinido como Flow Content ) e spané um "elemento em linha" ( Phrasing Content ). Sim, você pode alterar a apresentação padrão desses elementos, mas há uma diferença entre "fluxo" versus "bloco" e "fraseado" versus "embutido".

Um elemento classificado como conteúdo de fluxo pode ser usado apenas onde é esperado conteúdo de fluxo e um elemento classificado como conteúdo de fraseado pode ser usado onde é esperado conteúdo de fraseado. Como todo o conteúdo do fraseado é de fluxo, um elemento de fraseado também pode ser usado em qualquer lugar que seja esperado. As especificações fornecem informações mais detalhadas .

Todos os elementos de expressão, como stronge em, podem conter apenas outros elementos de expressão: você não pode colocar um tabledentro de um, citepor exemplo. A maioria dos conteúdos de fluxo, comodiv e lipode conter todos os tipos de conteúdo de fluxo (assim como fraseado conteúdo), mas há algumas excepções: p, pre, e thsão exemplos de conteúdo de fluxo não-fraseado ( “elementos de bloco”) que pode única contêm fraseado conteúdo ("elementos em linha"). E, é claro, existem as restrições de elementos normais, como dle tablesomente sendo permitido conter determinados elementos.

Enquanto ambos div e psão não-fraseado conteúdo de fluxo, o divpode conter outras crianças conteúdo de fluxo (incluindo mais divs e ps). Por outro lado, ppode conter apenas filhos de conteúdo fraseado. Isso significa que você não pode colocar um divdentro de p, mesmo que ambos sejam elementos de fluxo sem fraseado.

Agora aqui está o kicker. Essas especificações semânticas não estão relacionadas à maneira como o elemento é exibido. Assim, se você tiver um divdentro de span, você receberá um erro de validação, mesmo que tenhaspan {display: block;} e div {display: inline;}em seu CSS.

chharvey
fonte
E quanto ao bloco embutido dentro do bloco embutido e dentro do bloco embutido?
user764754
@ user764754 desde que cumpra as especificações, você pode estilizar qualquer elemento que desejar e ele ainda será válido. ( inline-blockÉ um estilo CSS, não é um tipo de elemento ou modelo de conteúdo.)
chharvey