Elementy blokowe a liniowe

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 54 z 76.

W HTML elementy dzielą się na elementy blokowe i liniowe w zależności od sposobu ich wyświetlania na stronie. Zrozumienie różnicy między tymi dwoma typami elementów jest kluczowe dla tworzenia dobrze uporządkowanych i atrakcyjnych wizualnie układów. Przyjrzyjmy się cechom i zachowaniu elementów blokowych i liniowych.

Elementy blokowe

Element blokowy zawsze zaczyna się w nowym wierszu i zajmuje całą dostępną szerokość, rozciągając się jak najdalej w lewo i w prawo. Tworzy „blok” treści.

Przykłady elementów blokowych obejmują:

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

Elementy śródliniowe

Element liniowy nie zaczyna się w nowej linii i zajmuje tylko tyle szerokości, ile potrzeba, aby zmieścić jego zawartość. Umożliwia elementom liniowym przepływanie w obrębie wiersza tekstu lub wewnątrz elementu blokowego.

Przykłady elementów liniowych:

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

Wyzwanie

Łatwy

Otrzymujesz dokument HTML zawierający różne elementy. Twoim zadaniem jest określić, które elementy są blokowe, a które liniowe, a następnie zastosować podstawowe reguły CSS, aby pokazać różnice. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera wszystkie elementy blokowe (div, p, h1). Ustaw ich background-color na lightgray i dodaj border o wartości 1px solid blue.
Napisz regułę CSS, która wybiera wszystkie elementy liniowe (span, a, img). Ustaw ich background-color na lightyellow i dodaj border o wartości 1px solid red.

Zaobserwuj, że elementy blokowe zajmują całą dostępną szerokość i zaczynają się w nowych wierszach, a elementy liniowe zajmują tylko tyle miejsca, ile potrzeba, i układają się w wierszu.

Spróbuj swoich sił

<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>