HTML - CSS - Javascript

Box Model trong CSS

Mỗi phần tử HTML của trang web được mô phỏng (model) giống như một chiếc hộp hình chữ nhật được hình thành từ bốn thành phần:

  • Nội dung phần tử.
  • Vùng Đệm (hay khoảng đệm).
  • Vùng viền.
  • Lề.




Thuật ngữ box model (mô hình hộp hoặc hộp mô phỏng) được dùng để chỉ phương pháp sử dụng các hộp để mô phỏng các phần tử HTML trên trang web.

Nội Dung Phần Tử

Nội dung phần tử có thể là vă bản, hình ảnh,hoặc kết hợp cả văn bản và hình ảnh.... và là phần trong cùng của box model.

Diện tích của nội dung phần tử phụ thuộc giá trị của các thuộc tính chiều rộng (width) và chiều cao (height) của phần tử:

.square {
  width: 150px; 
  height: 150px;
  border: 1px solid red;
}

 

Giá trị mặc định của cả hai thuộc tính width và height là auto và trình duyệt sẽ tự động tính toán để hiển thị nội dung thực tế bên trong một cách phù hợp.

Với các phần tử như h1pdiv... thì mặc định chiều ngang của chúng sẽ luôn chiếm 100% chiều ngang của phần tử cha:

h1, p, div {
  border: 1px solid red;
}

 

Với các phần tử như aimgspan thì mặc định chiều ngang và chiều dọc của chúng sẽ chiếm kích thước vừa đủ, phù hợp để hiển thị nội dung bên trong phần tử:

a, img, span {
  border: 1px solid green;
}

 

Các phần tử như h1pdiv thuộc kiểu hiển thị khối (block display) trong khi các phần tử như aimg span thuộc kiểu hiển thị trong dòng (inline display). Chúng ta sẽ tìm hiểu về các kiểu hiển thị của phần tử HTML trong CSS ở các bài học tiếp theo.

Vùng Đệm

Vùng đệm (hay khoảng đệm) của một box model là phần diện tích bao ngoài nội dung phần tử và được thiết lập thông qua các thuộc tính padding trong CSS:

p {
    padding: 30px 20px 20px 30px;
}

 

Chi tiết về các thuộc tính padding để thiết lập vùng đệm sẽ được đề cập ở bài học tiếp theo.

Vùng Viền

Vùng viền là phần diện tích bao quanh vùng đệm và được thiết lập thông qua các thuộc tính border trong CSS:

p {
    border: 1px solid red;
}

 

Chi tiết về các thuộc tính border để thiết lập vùng đệm sẽ được đề cập ở bài học tiếp theo.

Lề

Lề của một box model là phần diện tích bao ngoài vùng viền và được thiết lập thông qua các thuộc tính margin trong CSS:

p {
    margin: 30px 20px 20px 30px;
}

 

Chi tiết về các thuộc tính margin để căn chỉnh lề sẽ được đề cập ở bài học tiếp theo.