Trong HTML và CSS, các phần tử được phân loại thành hai loại chính: block-level và inline. Đây là một số sự khác biệt giữa chúng và ví dụ minh họa:
Block-level elements:
- Block-level elements tạo ra một khối toàn diện chiếm hết chiều ngang của khối chứa (thường là khung trình duyệt) và bắt đầu trên một dòng mới.
- Các ví dụ về block-level elements bao gồm:
<div>,<p>,<h1>–<h6>,<ul>,<ol>,<li>,<table>, và nhiều thẻ khác.
Ví dụ sử dụng block-level elements:
html
<div>This is a block-level div.</div>
<p>This is a block-level paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Inline elements:
- Inline elements chỉ chiếm lượng không gian cần thiết trong khối chứa và không tạo dòng mới sau khi nó kết thúc.
- Các ví dụ về inline elements bao gồm:
<span>,<a>,<strong>,<em>,<img>,<br>, và nhiều thẻ khác.
Ví dụ sử dụng inline elements:
html
<p>This is an <em>inline</em> element.</p>
<p>Visit <a href="https://www.example.com">example.com</a> for more information.</p>
Trong ví dụ trên, thẻ <div>, <p>, <ul>, và <li> là block-level elements, trong khi thẻ <em> và <a> là inline elements. Sự khác biệt giữa chúng giúp điều chỉnh cách phần tử hiển thị và tương tác với các phần tử khác trên trang web. Trên đây là giới thiệu về Block và Inline trong HTML