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ờ.. Thành phần inline có thể nằm trong thành phần Block, nhưng Block không t
Trang 1Khá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:
Bạn sẽ thấy dòng chữ này chiếm hết độ rộng của thành phần mẹ chứa nó và tự động xuống hàng mới
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
Trang 2Ví 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ờ
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:
2 <li><a href="#">Home</a></li>
3
<li><a href="#">About</
a></li>
4 <li><a href="#">Services</a></li>
5
<li><a href="#">FAQs</
a></li>
6 <li><a href="#">Contact</a></li>
7 </ul>
Trang 3Nó 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:
menuN
av li {
display:inline;
background-color:#eee;
border:1px
solid red;
margin:0; padding:0px 10px;
}