Box Model

Box Model Là Gì

Trên trang HTML, mỗi phần tử của trang được đại diện bởi một hình chữ nhật. Trong CSS các hình chữ nhật này được xem như một chiếc hộp và thuật ngữ box model được dùng để chỉ các hộp này.

margin
border
padding
Nội dung

Mỗi một box model bao gồm 4 thành phần:

  • Nội dung của phần tử tương ứng (element content).
  • Đường viền (border)
  • Khoảng đệm (padding) và
  • Lề (margin)

Nội Dung Phần Tử

Nội dung phần tử là thành phần trong cùng của box model. Nội dung phần tử có thể là đoạn văn bản (với thẻ <p> hoặc <div>) hay hình ảnh (đối với thẻ <img>)... Bạn có thể đặt chiều cao chiều rộng cho nội dung phần tử sử dụng các thuộc tính như height, width.

div {
    width: 100px; 
    height: 100px;
}

Đường Viền

Để tạo viền cho Box Model chúng ta sử dụng thuộc tính border. Thuộc tính này nhận 3 giá trị là độ dày của viền, kiểu viền (đường viền nét liền, đường viền dùng dấu chấm hay đường viền dùng dấu gạch ngang..) và giá trị cuối cùng là màu sắc của viền. Ví dụ:

p {
    border: 1px solid blue;
}

Bạn sẽ tìm hiểu chi tiết hơn về đường viền trong các bài học tiếp theo.

Khoảng Đệm

Tương tự như việc tạo lề, bạn cũng có thể tạo khoảng đệm cho một box model nhờ sử dụng thuộc tính padding. Thuộc tính này cũng có 4 giá trị giống như margin:

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

Bạn sẽ tìm hiểu chi tiết hơn về đường viền trong các bài học tiếp theo.

Canh Lề

Để tạo lề trong CSS chúng ta sử dụng thuộc tính margin. Thuộc tính này nhận 4 giá trị là lề trên, lề phải, lề dưới và lề trái. Ví dụ:

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

Bạn sẽ tìm hiểu chi tiết hơn về đường viền trong các bài học tiếp theo.

Thêm Bình Luận: