Thành phần Block và Inline

• January 14, 2010
• 21 comments

Khái niệm về Inline và Block là một khái niệm hết sức cơ bản nhưng cũng cực kỳ quan trọng trong CSS. Hiểu được từng đặc điểm của mỗi thành phần là chìa khóa quan trọng để bạn có thể vận hành CSS theo ý muốn. Trong bài này tôi sẽ nói về chức năng của từng thành phần. Tuy nhiên tôi sẽ vẫn giữ nguyên từ chuyên ngành là Block và Inline mà không dịch ra tiếng Việt là “khối” và “trong dòng” nghe cùi quá.

Khi các thành phần HTML được hiển thị trên trình duyệt nó thường có 2 cách hiển thị là theo Block và Inline. Nói hình tượng để bạn dễ hiểu thì các thành phần Block giống như một bàn cờ và các thành phần Inline là quân cờ. Các quân cờ nằm trong bàn cờ và bàn cờ thì không bao giờ nằm trong quân cờ. Đây cũng là một nguyên tắc cơ bản nhất của Inline và Block. Thành phần inline có thể nằm trong thành phần Block, nhưng Block không thể nằm trong thành phần Inline.

Lý thuyết thì là vậy nhưng hơi mơ hồ khó hiểu, cách tốt nhất là chúng ta học từ ví dụ ở dưới.

Ví dụ về Block

Thẻ <p> và <div> là hai thành phần mặc định Block phổ biến nhất. Chỉ khi bạn khai báo trong CSS và muốn biến nó thành inline với Property là Display: inline thì nó mới thành inline. Ví dụ tôi có một thẻ <div> như sau:

Nếu tôi viết tiếp thì dòng mới sẽ bị đẩy xuống dưới dù cho nó được viết cùng hàng với dòng ở trên nằm trong thẻ <div>

Các thành phần Block bao gồm

<div>: Là thành phần trắng dùng để làm “hộp” chứa.
<h1> ….<h6>: Các headings
<p>: Thẻ này dùng để mở đầu và kết thúc một đoạn văn bản.
<li>, <dt>, <dd>: hiển thị danh sách.
<table>, <blockquote>, <pre> và <form>

Ví dụ về thành phần Inline

Ví dụ tôi có một đoạn văn như sau, và trong đó tôi có một cặp thẻ <strong>, nó không bắt thành phần nằm trong nó phải xuống hàng mà nó chỉ “nhẹ nhàng” chui vào giữa và sống hạnh phúc trong đó. Cũng giống như quân cờ nằm trong bàn cờ vậy.

Các thành phần inline bao gồm

<span>, <a>, <em>, <br />
<img>

Ví dụ hình mặt cười này sẽ xuất hiện ở trong dòng mà không ép chữ xuống hàng mới. Nó chỉ chiếm khoảng không gian tối thiểu mà nó cần. Giống như quân cờ chỉ chiếm một khoảng không gian nhất định của nó mà thôi. Chứ nó không ảnh hưởng đến bàn cờ.

<input>

Display Property

Cái hay của CSS là bạn không chỉ bị ép buộc sử dụng giá trị mặc định của từng thành phần. Mà bạn có thể thay đổi cách hiển thị của nó theo ý mình. Ví dụ một thành phần <li> theo mặc định là dạng Inline nhưng bạn có thể biến nó thành block với CSS tương ứng là Display: block. Đây chính là một phần rất quan trọng trong thiết kế giao diện. Nó mở ra một chân trời mới với các cách sắp xếp thành phần mà chỉ bị giới hạn bằng khả năng thiết kế của bạn.

Được áp dụng nhiều nhất là khi bạn sử dụng <li> làm menu như rất nhiều trang web. Ở mặc định nếu bạn có một list như sau:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
</ul>

Nó sẽ xuất hiện như sau ở trình duyệt

• Home
• About
• Services
• FAQs
• Contact

Nếu bạn muốn nó xuất hiện trong cùng một hàng thì bạn có thể khai bao CSS như sau:

.menuNav li {
display:inline;
background-color:#eee;
border:1px solid red;
margin:0; padding:0px 10px;
}

Bạn cũng có thể tham khảo thêm video tutorial tôi đã làm về Display Property trong CSS để hiểu thêm chi tiết.