Phần tử khối và phần tử nội tuyến trong HTML

Hầu hết các phần tử HTML đều thuộc một trong hai loại là: phần tử khối hoặc phần tử nội tuyến

Phần tử khối (Block Element) là gì?

Phần tử khối:

• Luôn được bắt đầu trên một hàng mới.
• Chiều rộng của nó trải dài từ trái qua phải (chiếm toàn bộ chiều rộng phần nội dung của phần tử chứa nó).
• Phần tử phía sau nó sẽ được bắt đầu trên một hàng mới.

Dưới đây là hình ảnh minh họa về phần tử khối:

Một số thẻ thuộc kiểu phần tử khối:

• <div>
• <p>
• <h1> - <h6>
• <form>
• <table>
• <ul>, <ol>, <li>

Phần tử nội tuyến (Inline Element) là gì?

Phần tử nội tuyến:

• Không được bắt đầu trên một hàng mới (trừ trường hợp trước nó là một phần tử khối).
• Chiều rộng của nó phụ thuộc vào chiều rộng phần nội dung của nó.

Dưới đây là hình ảnh minh họa về phần tử nội tuyến:

Một số thẻ thuộc kiểu phần tử nội tuyến:

• <span>
• <a>
• <img>

Thẻ <div>

Thẻ <div> là một phần tử khối và có thể dùng để chứa các phần tử khác.

Thẻ <div> không có định dạng gì đặc biệt. Nó thường được dùng để nhóm các phần tử HTML lại thành một khối, tiện cho việc định dạng tập thể.

<p>Đoạn văn số 1</p>
<div style="color:blue;font-size:25px">
    Đoạn văn số 2
    <p>Đoạn văn số 3</p>
    <p>Đoạn văn số 4</p>
</div>
<p>Đoạn văn số 5</p>

Ta có thể dùng thuộc tính align để canh lề nội dung của phần tử <div>

<p>Đoạn văn số 1</p>
<div align="center">
    Đoạn văn số 2
    <p>Đoạn văn số 3</p>
    <p>Đoạn văn số 4</p>
</div>
<p>Đoạn văn số 5</p>
<div align="right">
    <p>Đoạn văn số 6</p>
    <p>Đoạn văn số 7</p>
</div>

Thẻ <span> trong HTML

Thẻ <span> là một phần tử nội tuyến, nó thường được dùng để chứa văn bản và định dạng cho văn bản.

<p>Trong đoạn văn bản <span style="background-color:green">câu này nằm bên trong thẻ span</span> và được định dạng</p>

Gợi ý: Để kiểm tra một phần tử thuộc loại phần tử khối hay phần tử nội tuyến, ta thêm style="border:1px solid black" vào thẻ mở của phần tử để xem kích thước của phần tử. Ví dụ <div style="border:1px solid black">Hello</div>