Hướng dẫn Tìm hiểu phần tử Block (khối) và Inline (nội dòng)

[PVS]

Tìm hiểu phần tử Block (khối) và Inline (nội dòng)

Nếu nói về các thuộc tính CSS cho việc trang trí văn bản thì cũng chỉ có các thuộc tính mà bạn đã xem ở hai phần trước. Nhưng một cái khó nhất trong CSS đó là sử dụng kỹ thuật CSS Layout như thế nào cho chính xác để lên bố cục giao diện website của mình, và đây là bài quan trọng nên đọc trước khi tìm hiểu kỹ thuật CSS Layout mà mình sẽ hướng dẫn sau này.

CSS Layout là thuật ngữ chỉ chung về việc dựng bố cục cho website dựa trên việc sử dụng và tùy biến các khối, phần tử.

Để dễ dàng hơn để sau này khi tìm hiểu về các kỹ thuật nâng cao, thì việc bạn cần làm bây giờ là nên hiểu thế nào là Block, thế nào là Inline. Đây là hai thuật ngữ rất thường sử dụng trong CSS, từ việc đọc các bài hướng dẫn đến việc tìm kiếm giải pháp trên Internet. Ví dụ:

HTML:

<div class="general">Đây là phần tử block 1</div>
<div class="general">Đây là phần tử block 2</div>
<span class="general">Đây là phần tử inline 1</span>
<span class="general">Đây là phần tử inline 2</span>

CSS:

.general {
  background: #333;
  color: #fff;
  padding: 20px;
  margin-bottom: 2em;
}

Kết quả:

​

Block là gì?
Phần tử khối (Block Elements) là thuật ngữ chỉ chung các thẻ HTML có chức năng tạo một khu vực hay nói dễ nghe xíu là một khối. Khối này có nghĩa là một thẻ khi mà bạn khai báo thì nó sẽ được hiển thị ở mỗi dòng riêng biệt bao gồm các nội dung nằm bên trong. Ở các bài học HTML cơ bản bạn có thể đã biết qua một số thẻ block cơ bản như <p>, <ul>, <ol>, <h1>,…

Và khi bạn học tới CSS, bạn sẽ dùng một thẻ rất quan trọng nữa đó là <div> và đây là một thẻ được dùng để tạo các block hay một khu vực nào đó để dễ dàng viết CSS sau này.

Inline là gì?
Phần tử nội dòng (Inline Elements) là thuật ngữ chỉ chung các thẻ HTML khi mà khai báo vào nội dung thì nó vẫn sẽ nằm chung một dòng với các văn bản khác. Một số thẻ inline rất hay dùng đó là <b>, <strong>, <i>, <u>,…và đặc biệt là <span> nếu bạn cần gộp nhóm các phần tử nào đó mà không ảnh hưởng đến các văn bản chung một hàng, thẻ <span> này có ý nghĩa và cách sử dụng giống như <div> nhưng nó được dùng trong inline.

Có thể thay đổi từ Inline sang Block và ngược lại không?
Câu trả lời là có, chúng ta có thể đổi kiểu hiển thị một phần tử bất kỳ từ inline sang block và ngược lại, hay chuyển qua kiểu hiển thị khác là table với thuộc tính display trong CSS. Nhưng vấn đề này mình sẽ nói kỹ hơn ở một phần hướng dẫn riêng cho thuộc tính này sẽ kỹ hơn.

Tại sao việc hiểu Block và Inline lại quan trọng?
Khi sử dụng CSS để dựng bố cục website mà bạn chưa hiểu rõ về Block và Inline thì có thể sẽ gặp một số khó khăn nếu đụng tới một số phần khó. Chẳng hạn như bạn sẽ không biết sử dụng <div> và <span> thế nào cho hợp lý, không thể sửa kiểu hiển thị một số phần tử theo ý muốn,…và đây là vấn đề khá quan trọng sau này mà chỉ khi tiến hành thực hành nhiều với CSS bạn mới thấy được.

Lời kết
Trong bài này thì mình chỉ muốn giải thích cho các bạn hiểu thế nào là block và inline thôi vì hai thuật ngữ này mình sẽ sử dụng khá nhiều từ bài này. Trong bài này mình cũng có nói qua về thẻ <div> nhưng ở ngay bài kế tiếp, mình sẽ nói kỹ hơn về thẻ này và cách sử dụng nó.

Chúc các bạn thành công.

Nguồn: thachpham.com​