Різниця між - div - і - span, webreference
Елементи з попередньої глави виводяться послідовно на одній горизонтальній рядку. Вони ведуть себе як звичайний текст і просто відображаються поруч один з одним, навіть якщо вони мають певні розміри та інші властивості, які не належать до тексту. Це не повинно дивувати, так як
Щоб побачити як працюють елементи
Згідно наведеним вище умовам, HTML буде виглядати наступним чином.
В CSS ми пишемо клас .container. який пов'язаний з тегом
Подивимося на це в браузері.

Схоже на один великий прямокутник. Як щодо відокремити теги
Я додав властивість margin-bottom (виділено вище), щоб відокремити кожен

Відмінно! Браузер відображає ці «блоки» один під іншим, на відміну від нашого попереднього прикладу з формою, де елементи виводилися в один рядок.
У чому різниця? Коли справа доходить до відображення тегів, браузер розпізнає три групи елементів:
- inline (рядкові);
- block (блокові);
- inline-block (рядково-блокові).
Рядкові елементи не викликають переведення на новий рядок і показують один елемент поруч з іншим по горизонталі. Блокові елементи встановлюються як блоки, які укладаються по верхній частині один одного і ніколи не відображаються поруч по горизонталі, якщо ми не використовуємо магічні трюки в CSS (про які дізнаємося в наступному розділі). Рядково-блокові діють як малих елементів (відображаються поруч один з одним), але відрізняються від них тим, що їм можна задати розмір. Наприклад, поле
Дозвольте мені поділитися з вами деякими прикладами елементів, які можна класифікувати відповідно до однієї з цих трьох груп.
- рядкові - . .
- блокові - .
.
- Рядково-блокові - .
За замовчуванням, у малих елементів стильова властивість display встановлено як inline. Для блокових елементів його значення block. а для рядково-блокових елементів inline-block. Тепер ви можете пояснити, через що тег не переносить текст на новий рядок. Тому що це рядковий елемент, а значить в CSS у нього властивість display встановлено як inline. З урахуванням цього код нижче:
Браузер відобразить в одну лінію:
Однак можна змінити цю поведінку, додавши один рядок в CSS:
Тепер наші теги відображаються інакше, кожен з них починається з нового рядка, оскільки ми встановили властивість display як block.
Для цього прикладу ми використовуємо
. Ви можете поцікавитися, що цей тег описує в документі. Коротка відповідь: нічого. Ми використовуємо тегв тих випадках, коли всі інші теги не підходять для використання того, що ми вклали в документ. У загальному випадку тег(В поєднанні з різними класами) застосовується для отримання різних візуальних ефектів, в результаті у нього немає функції для опису вмісту. Наприклад, якщо ви бажаєте зробити три вертикальних колонки на сайті, то, можливо, буде потрібно елемент, який може розділити деякі малі або рядково-блокові елементи.Взагалі, хорошою ідеєю буде не зловживати тегом
. якщо це можливо.З нашими новими знаннями про блоках давайте переробимо код нашої форми так, щоб поля форми і їх опису красиво відображалися один під одним.
Це виглядає трохи складніше, але єдине що ми зробили, так це додали теги
. щоб оточити кожен елемент форми.Ще раз, давайте порівняємо новий (праворуч) і старий код (зліва).

А тепер подивимося, як новий код відображається в браузері!

Наша форма тепер виглядає чудово!