Содержание

Руководство HTML Block/Inline Elements

Элементы в HTML делятся на 2 вида: Block-Level elements (Блочные) и Inline elements (Строчные элементы).

Block-level Elements

Когда Block-level element (блочные элементы) отображаются на браузере, они автоматически добавляют разрывы строк (line break) впереди и сзади. 

<h4>Block Element Example:</h4>
<hr/>

Tom <h2>and</h2> Jerry.

Список всех Block-level element (по умолчанию) у HTML5:

  • <address>
  • <article>
  • <aside>
  • <blockquote>
  • <details>
  • <dialog>
  • <dd>
  • <div>
  • <dl>
  • <dt>
  • <fieldset>
  • <figcaption>
  • <figure>
  • <footer>
  • <form>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h5>
  • <h6>
  • <header>
  • <hgroup>
  • <hr>
  • <li>
  • <main>
  • <nav>
  • <ol>
  • <p>
  • <pre>
  • <section>
  • <table>
  • <ul>

Примечание: Некоторые элементы по умолчанию это Block-Level element, например <div>, но вы можете его конвертировать в Inline Element если применить к нему CSS: {display:inline}.

div-inline-example.html

<h4>DIV (Default):</h4>

This is a <div>DIV</div> element.

<hr/>

<h4>DIV style:{display:inline}</h4>

This is a <div>DIV</div> element.

Inline Elements

Inline element (строчные элементы) постоянно появляются в строке (sentence), при отображении на браузере, он не добавляет автоматически разрывы строк (line break) впереди и сзади. 

<h4>Inline Element Example:</h4>
<hr/>

Tom <b>and</b> Jerry.

Список всех Inline element (по умолчанию) у HTML5:

  • <a>
  • <abbr>
  • <acronym>
  • <audio> (if it has visible controls)
  • <b>
  • <bdi>
  • <bdo>
  • <big>
  • <br>
  • <button>
  • <canvas>
  • <cite>
  • <code>
  • <data>
  • <datalist>
  • <del>
  • <dfn>
  • <em>
  • <embed>
  • <i>
  • <iframe>
  • <img>
  • <input>
  • <ins>
  • <kbd>
  • <label>
  • <map>
  • <mark>
  • <meter>
  • <noscript>
  • <object>
  • <output>
  • <picture>
  • <progress>
  • <q>
  • <ruby>
  • <s>
  • <samp>
  • <script>
  • <select>
  • <slot>
  • <small>
  • <span>
  • <strong>
  • <sub>
  • <sup>
  • <svg>
  • <template>
  • <textarea>
  • <time>
  • <u>
  • <tt>
  • <var>
  • <video>
  • <wbr>

Примечание: Некоторые элементы по умолчанию это Inline element, например <span>

, но вы можете его конвертировать в Block-Level если применить к нему CSS: {display:block}.

span-block-example.html

<h4>SPAN (Default):</h4>

This is a <span>SPAN</span> element.

<hr/>

<h4>SPAN style:{display:block}</h4>

This is a <span>SPAN</span> element.

<div> является Block-level element, это один из самых широко используемых элементов, и самый важные в документе 

HTML, он используется для содержания других жлементов или участвует в создании лэйаута (Layout) страницы.

По умолчанию <div> создает прозрачный прямоугольный участок, но вы можете визуально увидеть его если применить к нему CSS, например: background, border,….

div-css-example.html

<!DOCTYPE html>
<html>

<head>
    <title>DIV Element</title>
    <meta charset="UTF-8">
</head>
<body>

<h3>DIV Css Example:</h3>

<div>
   <h4>HTML Tutorials</h4>
   <ul>
      <li>Iframe</li>
      <li>Tables</li>
      <li>Lists</li>
   </ul>
</div>

<p>Others .


 ..</p>

</body>
</html>

<span> является важным Inline element и используется большего всего в документе HTML. Он используется для содержания других Inline element, или текстовых содержаний. <span> создает прозрачный участок, но вы можете визуально увидеть его если применить к нему CSS, например: background, border,…

span-css-example.html

<!DOCTYPE html>
<html>

<head>
    <title>SPAN Element</title>
    <meta charset="UTF-8">
</head>
<body>

<h3>Span Css Example:</h3>

<p>
  Apollo 11 was the spaceflight that landed the first humans,

  <span>
     Americans <b>Neil Armstrong</b> and <b>Buzz Aldrin</b>,
     on the Moon on July 20, 1969, at 20:18 UTC.
  </span>

  Armstrong became the first to step onto the lunar surface
  6 hours later on July 21 at 02:56 UTC. 
</p>

<p>...</p>

</body>
</html>

Мистический inline-flex и что он делает | by Stas Bagretsov

Пример 2: display: inline-flex

К трем контейнерам в синем цвете применяем display: inline-flex, в них есть три потомка div’а, которые в красном цвете имеют flex:1 и min-width: 50px.

Каждый родительский контейнер стоит сразу за другим, потому что они могут уместиться в один ряд. Ширина родительского контейнера зависит от размера потомков, которым тут был выставлен min-width в 50px.

CSS, но уже с inline-flex:

.container--inline-flex {
display: inline-flex;
}

HTML:

<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>

Объясняем примеры

Элемент с display:flex очень схож с элементом, на котором стоит display: block, потому что он забирает сразу всю строку. Однако, в сравнении с представленными до этого свойствами позиционирования, его потомки могут быть размещены в контейнере куда более гибко и динамично, нежели это было возможно ранее.

Если мы изменим display: flex на display: inline-flex:

Родительский контейнер будет показываться инлайново.

К потомкам могут быть применены все flex-свойства, разницы с display: flex в этом плане совсем не будет.

В общем, это означает то, что если элементы потомки не слишком велики, то два контейнера с display: inline-flex могут идти бок о бок в одной строке.

У других display свойств тоже есть свои инлайновые близнецы:

У block есть inline-block

У table есть inline-table

И даже у grid есть inline-grid

Больше про CSS Flex и его свойства вы можете прочитать в статье — Вёрстка на Flexbox в CSS. Полный справочник

CSS Display block inline и сравнение блочных и строчных элементов.

Свойство DISPLAY меняет поведение элемента на странице в зависимости от того, какое ему значение задаем. Значений много, но на ПРАКТИКЕ применяются ВСЕГО пять: block, inline, inline-block, none, flex;
Начнем с самого простого: display:none — убирает элемент из верстки, то как будто мы его удалили или закомментировали. Не стоит путать с visibility:hidden и opacity:0; — они делают элемент полностью прозрачным, но не убирают его, то есть его место остается не занятым, поскольку другие элементы думают что он есть, а при display:none они займут его место.
display:flex; относительно новое значение, по сути, элемент ведет себя как блочный, но вся суть в том, как ведут себя элементы внутри него. Но об этом в других уроках.

К блочным относятся: DIV, h2-H6, P и другие
К строчным относятся: span, i, em, b, strong, a и другие
К блочно-строчным относятся: IMG и другие (даже которые не знаете), это легко проверить на практике, потому в документациях часто противоречивая информация
https://jsfiddle. net/ybdagzn7/

Сравнительная таблица блочных и строчных элементов

blockinline-blockinline
Ширина width
по умолчанию		 Занимает всю доступную ширину, то есть 100%. Занимает ширину по количеству контента Занимает ширину по количеству контента
width=500pxпринимаетпринимаетпроигнорирует
heightпо количеству контентапо количеству контентапо количеству контента
внутренний отступ = paddingпринимаетпринимаетприменяется, но на соседние элементы не влияет.
marginпринимаетпринимаетприменяется только справа и слева, влияние на соседей оказывает
Более подробно про отличия: https://html5book.ru/block-inline-elements/ и тут https://webref.ru/layout/howtocodeinhtml/chapter10