Элементы: Inline против block-level
![](/static/storage/71873391210772140982432021619802247778.png)
Элементы HTML (HyperText Markup Language) исторически классифицировались либо как элементы «блочного уровня», либо как элементы «встроенного уровня». Сначала давайте посмотрим на встроенные элементы,
Элемент Inline
Встроенный (inline) элемент не начинается с новой строки. Встроенный элемент занимает ровно столько ширины, сколько необходимо.
Это элемент <span>
внутри абзаца.
<!DOCTYPE html>
<html>
<body>
<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>
<p>The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.</p>
</body>
</html>
Вот список распространенных встроенных элементов:
<a>
<img>
<small>
<script>
<strong>
Сложенные вместе несколько встроенных элементов.
<a href="#">Link</a>
<img src="" />
<small>The text gets become smaller</small>
<script>src=""</script>
<strong>React</strong>
Элементы Block-level
Элемент уровня блока (block) всегда начинается с новой строки, и браузеры автоматически добавляют некоторый пробел (поле) до и после элемента.
Элемент уровня блока всегда занимает всю доступную ширину. Обычно используются два блочных элемента: <p>
и <div>
<!DOCTYPE html>
<html>
<body>
<p style="border: 1px solid black">Hello World</p>
<div style="border: 1px solid black">Hello World</div>
<p>The P and the DIV elements are both block elements, and they will always start on a new line and take up the full width available (stretches out to the left and right as far as it can).</p>
</body>
</html>
Вот список общих элементов блока. Сложенные вместе несколько общих блочных элементов.
<h1 - h4>
, <header>
и <section>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<header>
<h1>A heading here</h1>
<p>Posted by John </p>
<p>Some additional information here</p>
</header>
<section>
<h2>WWF's Symbol</h2>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>