Элементы: Inline против block-level
Элементы 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>
