[Học CSS] Bài 14: Tìm hiểu về Box Model trong CSS

Trong bài này chúng ta sẽ cùng tìm hiểu xem Box Model nó là cái gì và làm việc với Box Model trong CSS như thế nào nhé !

Box Model là gì ?

Một trang HTML sẽ bao gồm rất rất nhiều phần tử, mỗi phần tử đó được xem như các khối (box). Và các box này được xác định bởi các thuộc tính: margins, borders, padding, content (nội dung).

Như vậy thuật ngữ Box Model là thuật ngữ chỉ cái phần tử box (khối) và các thuộc tính đi kèm của nó.

Hinh dung ve CSS Box Model

Hinh dung ve CSS Box Model

Làm việc với Box Model

Làm việc với Box Model là chúng ta sẻ đi thiết lập giá trị cho các thuộc tính như padding, margin, border và nội dung bên trong box.

Để tạo một Box Model thì chúng ta có thể sử dụng một số cặp thẻ như <p>, <div> hoặc class,….Các bạn tham khảo ví dụ về việc tạo một Box Model bằng thẻ div như sau:

Đó, chỉ vậy thôi. Bài này nói chung là để chúng ta hình dung về khái niệm Box Model là chính, còn ví dụ về cái này chúng ta cũng đã thực hiện khá nhiều ở các bài trước rồi.

Bài học trước đó và tiếp theo

[Học CSS] Bài 14: Tìm hiểu về Box Model trong CSS
Mời bạn oánh giá 😇
- TÁC GIẢ BÀI VIẾT -

Hocban.vn

Tác giả tại Tịnh Nguyễn Blog
Bài viết bạn vừa xem được thực hiện bởi Tịnh Nguyễn, một thanh niên đẹp zai chuẩn sói ca, có sở thích vọc vạch về máy tính và Internet, hiện tại là ác min của Hocban.vn. Đây là các bài viết của anh ấy !
Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Viết bình luận theo mẫu

(Các mục bắt buộc được đánh dấu * )