Block và Inline

Trong HTML các thành phần được hiển thị ở hai dạng block và inline:

Block

Khi thêm vào các thành phần block, nội dung bên trong các thành phần block sẽ được nằm trên một dòng mới . Ví dụ sau mô tả về các thành phần block:

1 <p>Thành phần block p</p>
2 <div>Thành phần block div</div>
3 <h2>Thành phần block h2</h2>

Kết quả nội dung của 3 thành phần này được nằm trên 3 dòng khác nhau (Mình thêm border để dễ phân biệt)

Thành phần block và Inline

Các thành phần block

Các thành phần block thường được sử dụng: <p>, <div>, <ul>, <ol>, <li>, <h1> đến <h6>, <form>, <table>…, xem thêm các thành phần block tại: http://htmlhelp.com/reference/html40/block.html

Inline

Ngược lại với block, khi thêm các thành phần inline vào một ví trí nào đó, thì nội dung của thành phần inline vẫn được nằm trên một dòng
Các thành phần Inline bao gồm: <a> (liên kết), <b>, <u>,< i>, <span>, <strong>, <em>,< img>…, xem thêm các thành phần inline khác tại đây: http://htmlhelp.com/reference/html40/inline.html

Ví dụ sau mình sẽ thêm các thành phần inline vào đoạn văn bản:

1 <p>Đoạn văn bản này có 3 thành phần inline: <b>inline 1</b>, <span>inline 2</span>, <u>inline 3</u></p>

Kết quả:

Đoạn văn bản này có 3 thành phần inline : inline 1, inline 2, inline 3

Ở đoạn văn bản trên mình đã thêm vào 3 thành phần inline là: <b>, <span> và <u> nhưng nội dung đoạn văn bản vẫn được nằm trong cùng một dòng, chỉ có nội dung của các thành phần inline thay đổi theo thuộc tính của thành phần đó.

Lưu ý:

  1. Bạn có thể đặt một thành phần inline trong một thành phần block hoặc trong một thành phầninline khác.
  2. Một thành phần block trong một thành phần block khác
  3. Nhưng tuyệt đối không thể đặt các thành phần block bên trong thành phần inline

Bạn không thể viết như sau, ví dụ:

1 <span><p>Thành phần p này là block do đó không thể đặt trong thành phần inline span</p></span>
Advertisements

Posted on November 7, 2012, in HTML/CSS and tagged , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: