Блочные и строчные элементы

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 54 из 76.

В HTML элементы классифицируются как блочные или строчные элементы, в зависимости от того, как они отображаются на странице. Понимание разницы между этими двумя типами элементов имеет решающее значение для создания хорошо структурированных и визуально привлекательных макетов. Давайте изучим характеристики и поведение блочных и строчных элементов.

Блочные элементы

Блочный элемент всегда начинается с новой строки и занимает всю доступную ширину, растягиваясь влево и вправо настолько, насколько это возможно. Он создает «блок» контента.

Примеры блочных элементов включают:

<div>
<h1> - <h6>
<p>
<ul>, <ol>, <li>
<form>
<table>
<header>, <footer>, <section>, <article>, <nav>

Строчные элементы

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

Примеры строчных элементов включают:

<span>
<a>
<img>
<strong>, <em>
<input>, <button>, <label>
<textarea>

Задание

Легко

Вам дан HTML-документ с различными элементами. Ваша задача — определить, какие элементы являются блочными, а какие — строчными, а затем применить базовый CSS, чтобы подчеркнуть различия. Выполните следующие шаги:

Напишите CSS-правило, которое выбирает все блочные элементы (div, p, h1). Установите для них background-color в значение lightgray и добавьте border со значением 1px solid blue.
Напишите CSS-правило, которое выбирает все строчные элементы (span, a, img). Установите для них background-color в значение lightyellow и добавьте border со значением 1px solid red.

Обратите внимание, как блочные элементы занимают всю доступную ширину и начинаются с новой строки, в то время как строчные элементы занимают ровно столько места, сколько необходимо, и располагаются внутри строки.

Шпаргалка

HTML-элементы классифицируются как блочные или строчные элементы в зависимости от их поведения при отображении.

Блочные элементы

Блочные элементы начинаются с новой строки и занимают всю доступную ширину, растягиваясь влево и вправо насколько это возможно.

Примеры: <div>, <h1>-<h6>, <p>, <ul>, <ol>, <li>, <form>, <table>, <header>, <footer>, <section>, <article>, <nav>

Строчные элементы

Строчные элементы не начинаются с новой строки и занимают ровно столько ширины, сколько необходимо для размещения их содержимого. Они располагаются внутри строки текста или внутри блочных элементов.

Примеры: <span>, <a>, <img>, <strong>, <em>, <input>, <button>, <label>, <textarea>

Попробуйте сами

<html>
<head>
    <title>Block vs Inline Elements</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a div element.</div>
    <p>This is a paragraph with a <span>span element</span> inside.</p>
    <h1>This is a heading element.</h1>
    <a href="#">This is a link</a>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image" width="100">
</body>
</html>