Không gian HTML

Không gian của các thẻ block

Do HTML sắp xếp các thẻ block theo chiều dọc từ trên xuống dưới, mỗi thẻ sẽ chiếm trọn vùng không gian theo chiều ngang, với cách sắp xếp này các thành phần sẽ chiếm vùng không gian như sau:

Phân tích:

spacing

HTML sắp xếp không gian cho thành phần thành 2 dạng:

  • Vùng không gian: là vùng chiếm chọn không gian theo chiều ngang, có giá trị vô hạn tùy thuộc vào chiều rộng của trang HTML.
  • Vùng hiển thị: có độ rộng tùy thuộc vào chiều rộng của thành phần, có giá trị hữu hạn, nó là một bộ phận của vùng không gian.

Chú ý: nếu thành phần không thiết lập chiều rộng thì chiều rộng của thành phần mang giá trị "auto" khi đó vùng không gian và vùng hiển thị sẽ tương đương nhau.

Thiết lập chiều rộng cho thành phần để hiểu thêm về vùng không gian và vùng hiển thị:

spacing

Không gian của thẻ inline

  • Không giống như các thẻ block, các thẻ inline được sắp xếp theo dạng lưới, từ trái sang phải, từ trên xuống dưới, thẻ nào xuất hiện trước sẽ nằm trước, thẻ nào xuất hiện sau sẽ nằm sau.
  • Không gian của các thẻ inline chỉ có một dạng duy nhất đó là vùng không gian hiển thị

Html viết:

<a href="www.hocwebchuan.com">Thẻ a</a>
<span>Thẻ span</span>
<strong>Thẻ strong</strong>
<em>Thẻ em</em>

Hiển thị trình duyệt:

Thẻ aThẻ spanThẻ strongThẻ em

Không gian của trang HTML

Bản thân trang HTML cũng sắp xếp không gian theo 2 dạng khác nhau:

  • Vùng không gian của HTML: là vùng chứa tất cả nội dung của trang HTML.
  • Vùng hiển thị của HTML: có độ rộng và cao tùy thuộc vào chiều rộng và chiều cao của cửa số trình duyệt, có giá trị thay đổi tùy theo cửa sổ trình duyệt.

spacing