SPAN против DIV (встроенный блок)

Question

Есть ли причина использовать <div style="display:inline-block"> вместо <span> для размещения веб-страницы?

Могу ли я поместить содержимое, вложенное в промежуток? Что действительно, а что нет?

Можно ли использовать это для создания таблицы размером 3х2?

<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

Согласно спецификации HTML , <span> является встроенным элементом, а <div> является блочным элементом. Теперь это можно изменить с помощью свойства display CSS, но есть одна проблема: с точки зрения проверки HTML, вы не можете поместить блочные элементы внутри встроенных элементов так:

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

не является строго действительным, даже если вы измените <div> на inline или inline-block.

Итак, если ваш элемент inline или inline-block, используйте <span>. Если это элемент уровня block, используйте <div>.

Answer 2

Если вы хотите иметь действительный документ xhtml, вы не можете поместить div внутри абзаца.

Кроме того, div с свойством display: inline-block работает иначе, чем span. Диапазон по умолчанию является встроенным элементом, вы не можете установить ширину, высоту и другие свойства, связанные с блоками. С другой стороны, элемент со свойством inline-block будет по-прежнему «перетекать» с любым окружающим текстом, но вы можете установить такие свойства, как ширина, высота и т. Д. Диапазон с свойством display: block будет не выполняется так же, как элемент inline-block, но создаст возврат каретки и будет иметь запас по умолчанию.

Обратите внимание, что встроенный блок поддерживается не во всех браузерах. Например, в Firefox 2 и менее вы должны использовать:

display: -moz-inline-stack;

, который немного отличается от элемента встроенного блока в FF3.

Здесь есть отличная статья о создании кросс-браузерных элементов inline-block.

Answer 3

1. Inline-block - это точка на полпути между установкой отображения элемента как встроенного или блокированного. Он сохраняет элемент во встроенном потоке документа, как display: inline делает, но вы можете манипулировать атрибутами блока элемента (ширина, высота и вертикальные поля), как вы можете с помощью display: block.

2. Мы не должны использовать блочные элементы внутри встроенных элементов. Это недействительно, и нет никаких оснований для такой практики.

Answer 4

Я знаю, что этот Q старый, но почему бы не использовать все DIV вместо SPAN? Тогда все играет все счастливы вместе.

Пример:

<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

Как ответили другие… div - это «блочный элемент» (теперь переопределяется как Flow Content ), а span - это «встроенный элемент» ( Phrasing Content ) , Да, вы можете изменить представление этих элементов по умолчанию, но есть разница между «потоком» и «блоком» и «выражением» и «встроенным».

Элемент, классифицированный как содержимое потока , может использоваться только в том случае, если ожидается содержание потока, а элемент, классифицируемый как содержание фразы , может использоваться, когда ожидается содержание фразы. Поскольку весь контент фразы является содержимым потока, элемент фразы также может использоваться везде, где ожидается содержание потока. Спецификации предоставляют более подробную информацию .

Все элементы фразы, такие как strong и em, могут только содержать другие элементы фразы: например, вы не можете поместить table внутрь cite. Большая часть содержимого потока, такого как div и li, может содержать все типы содержимого потока (а также контент фраз), но есть несколько исключений: p, pre и th являются примерами нефразирующего содержимого потока («блочные элементы»), которые могут только содержать фразовое содержимое («встроенные элементы»). И, конечно, существуют обычные ограничения на элементы, такие как dl и table, которые могут содержать только определенные элементы.

Хотя и div, и p являются нефразирующим содержимым потока, div может содержать другие дочерние элементы содержимого потока (включая дополнительные div с и p с). С другой стороны, p может содержать только дочерние фразы. Это означает, что вы не можете поместить div внутрь p, даже если оба элемента не являются фразами потока.

Теперь вот кикер. Эти семантические спецификации не связаны с тем, как отображается элемент. Таким образом, если у вас есть div внутри span, вы получите ошибку проверки, даже если у вас есть span {display: block;} и div {display: inline;} в вашем CSS.

Answer 6

Я думаю, что это поможет вам понять основные различия между Inline-Elements (например, span) и Block-Elements (например, div), чтобы понять, почему «display: inline-block» так полезен.

Проблема : встроенные элементы (например, span, a, button, input и т. Д.) Используют «margin» только вертикально (margin-left и margin-right), но не горизонтально Вертикальный интервал работает только для элементов блока (или если установлен «display: block»)

Решение : Только через «display: inline-block» также будет проходить вертикальное расстояние (сверху и снизу). Причина: встроенный элемент Span теперь ведет себя как внешний элемент блока, но как встроенный элемент внутри

Вот примеры кода:

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