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

Question 1

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

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

Можно использовать это, чтобы сделать таблицу 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>

Question 2

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

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

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

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

Question 3

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

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

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

display: -moz-inline-stack;

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

Существует большая статья здесь на создании кросс - браузер элементов рядный блок.

Question 4

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

Question 5

Я знаю, что этот 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>

Question 6

Я думаю, это поможет вам понять основные различия между встроенными элементами (например, span) и блочными элементами (например, 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>

Развернуть фрагмент

Question 7

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

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

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

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

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