HTML Block và Inline Elements

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    6 thg 10, 2022

  • Số lượt xem

    545 lượt xem


Các element trong HTML được chia làm hai loại block element và inline element. Tuy nhiên ta có thể thay đổi điều này nhờ vào CSS

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

<div> 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, classid 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, classid 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>

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.