Phần tử block và inline

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 54 trên 76.

Trong HTML, các phần tử được chia thành phần tử block-level hoặc inline, tùy theo cách chúng hiển thị trên trang. Hiểu rõ sự khác biệt giữa hai loại phần tử này rất quan trọng để tạo bố cục có cấu trúc tốt và bắt mắt. Hãy cùng tìm hiểu các đặc điểm và cách hoạt động của phần tử block-level và inline.

Các phần tử cấp khối

Phần tử dạng khối luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn, kéo dài hết mức có thể sang trái và sang phải. Phần tử này tạo thành một “khối” nội dung.

Một số ví dụ về phần tử cấp khối:

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

Phần tử nội tuyến

Phần tử nội tuyến không bắt đầu ở dòng mới và chỉ chiếm chiều rộng vừa đủ để chứa nội dung. Phần tử này cho phép các phần tử nội tuyến nằm liền mạch trong một dòng văn bản hoặc bên trong phần tử cấp khối.

Một số phần tử nội tuyến gồm:

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

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có nhiều phần tử. Nhiệm vụ của bạn là xác định phần tử nào thuộc cấp khối và phần tử nào thuộc dòng, sau đó áp dụng một số CSS cơ bản để làm nổi bật sự khác biệt. Hãy làm theo các bước dưới đây:

Viết một quy tắc CSS nhắm đến tất cả phần tử cấp khối (div, p, h1). Đặt background-color thành lightgray và thêm border có giá trị 1px solid blue.
Viết một quy tắc CSS nhắm đến tất cả phần tử nội dòng (span, a, img). Đặt background-color thành lightyellow và thêm border có giá trị 1px solid red.

Quan sát cách các phần tử cấp khối chiếm toàn bộ chiều rộng hiện có và bắt đầu trên dòng mới, trong khi các phần tử nội dòng chỉ chiếm khoảng không gian cần thiết và nằm trong dòng.

Tự làm thử

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