Block-level Elements
Block element luôn bắt đầu trên một dòng mới và trình duyệt sẽ tự động thêm một số khoảng trắng (margin) trước và sau element.
Block element luôn chiếm toàn bộ chiều rộng có sẵn (trải dài sang trái và phải hết mức có thể). Hai block element thường được sử dụng là: <p>
và <div>
.
<p>
element xác định một đoạn văn trong tài liệu HTML.
<div>
element xác định một bộ phận hoặc một phần trong tài liệu HTML.
<p> element là một block element
<p>Hello World</p> <div>Hello World</div>
Dưới đây là các block element trong HTML:
Inline Elements
Một inline-element không bắt đầu trên một dòng mới.
Một inline-element chỉ chiếm nhiều chiều rộng khi cần thiết.
Đây là một element <span> bên trong một đoạn văn.
<span>Hello World</span>
Dưới đây là các inline element trong HTML:
<div> Element
<div>
element thường được sử dụng làm vùng chứa cho các phần tử HTML khác.
<div>
element không có attribute bắt buộc, nhưng style
, class
và id
là chung.
Khi được sử dụng cùng với CSS, phần tử <div>
có thể được sử dụng để tạo kiểu cho các khối nội dung:
<div style="background-color:black;color:white;padding:20px;"> <h2>Luân Đôn</h2> <p>Luân Đôn là thành phố thủ đô của nước Anh. Đây là thành phố đông dân nhất ở Vương quốc Anh, với một vùng đô thị hơn 13 triệu dân.</p> </div>
<span> Element
<span>
element là một inline element được sử dụng để đánh dấu một phần của văn bản hoặc một phần của tài liệu. Phần tử <span>
không có attribute bắt buộc, style
, class
và id
là chung. Khi được sử dụng cùng với CSS, phần tử <span>
có thể được sử dụng để tạo kiểu cho các phần của văn bản:
<p>Mẹ tôi có một đôi mắt màu <span style="color:blue;font-weight:bold;">xanh</span> và ba tôi thì có đôi mắt màu <span style="color:brown;font-weight:bold;">nâu</span> eyes.</p>