Trong quá trình lập trình web, để thiết kế và điều chỉnh các phần tử của HTML vào đúng vị trí mà mình mong muốn. Các lập trình viên lúc này sẽ cần sử dụng đến thuộc tính Box Model trong CSS, Box Model gồm các thành phần là margin, border, padding và content sẽ bao bọc quanh các phần tử của HTML.
Để hiểu rõ hơn về Box Model là gì? Cũng như cách sử dụng Box Model trong lập trình web. Bài viết dưới đây sẽ giúp các bạn giải đáp những thắc mắc trên. Đồng thời trong bài viết, anh cũng chia sẻ thêm cho các bạn về những lưu ý trong cách tính chiều cao và chiều rộng của thẻ HTML để các bạn tránh trường hợp nhầm lẫn rằng chỉ tính các phần tử HTML mà không nhớ rằng chúng còn được bao bọc bởi Box Model.
1. Box Model là gì
Tất cả các thành phần của HTML như thẻ button, p, div ect được bao bọc xung quanh một khối hộp (box). Hiểu được khái niệm của box model sẽ giúp chúng ta dễ dàng thiết kế và điều chỉnh các phần tử của HTML vào đúng vị trí mà mình mong muốn.
Bao bọc quanh các phần tử của HTML là box model với các thành phần của box model là: margin, border, padding, và content như sau
Content: Chính là nội dung bên trong, nơi mà chúng ta thấy chữ và hình ảnh của một phần tử HTML.
Padding: Chính là phần nằm giữa nội dung bên trong và border của box.
Border: Chính là đường viên xung quanh nội dung và padding.
Margin: Chính là khoảng cách của phần tử HTML so với các phần tử khác. Các này khác với Padding ở chỗ. Padding chỉ là khoảng cách nội dung bên trong phần tử HTML còn Margin là so sánh với các phần tử bên ngoài.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.
This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ta thấy border được viền bằng màu xanh lục với độ dày là 15px
Khoảng cách giữa border và đoạn text bên ngoài ở phía trên chính là margin 20px. Như vậy dùng margin để ta xác định khoảng cách thẻ div với thẻ bên ngoài div.
Ta thấy đoạn text This is the content nằm bên trong div và có khoảng cách với border là 50px thì đó chính là padding. Padding dùng để canh chỉnh nội dung bên trong 1 cái div.
Sẽ có nhiều người nghĩ là chiều width của thẻ div là 320px. Vì thấy thuộc tính width: 320px. Điều này là sai vì như ta nói ở phần trên các phần tử HTML được bao bọc trong một cái gọi là box model. Trong Box model là có thêm phần padding, border. Chính vì vậy khi ta tính ra chiều rộng của một thẻ div thì ta phải cộng thêm chiều rộng của padding, border vào nữa.
Tất cả element trong HTML đều như là một box(cái hộp). Do đó, chúng ta có thể hiểu rằng box model như là một cái hộp bao bọc từng element có các thuộc tính sau: nội dung(content), khoảng bao bọc(padding), khung(border), và lề(margin).
Chúng ta có thể hình dung một box model như sau:
Do mỗi element đều có box model nên khi tính width, height của element chúng ta cần xác định:
-Content: nội dung của cái hộp, nơi mà các text hay image chiếm chỗ -Padding: khoảng không gian trong suốt(không thể thấy) bao bọc element. -Border: một cái khung bọc element. -Margin: khoảng không gian trong suốt(không thể thấy) bao quanh element.
Giả sử, chúng ta có một div được format css như sau:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
Box-sizing
Là cách tính width, height của một element trong css. Có hai cách tính là content-box và border-box. Content box là cách tính khi mà chúng ta bỏ qua padding, margin, border. Nó chỉ tính width, height dựa trên content mà thôi. Ngược lại, border box là cách tính mà chúng ta lấy tất cả: content, padding, border, margin.
CSS Box Model bao gồm những gì?
Kỹ thuật Box Model trong CSS bao gồm 4 phần quan trọng đó là:.
Margin: Khoảng cách tính từ bên ngoài của phần tử..
Border: Đường viền của phần tử..
Padding: Khoảng cách tính từ bên trong của phần tử..
Content: Nội dung trong phần tử..
Trong mô hình hộp box model thuộc tính margin có tác dụng gì?
Một điều đặc biệt của margin (so với padding) là margin có thể nhận giá trị âm. Thông thường, ta sẽ dùng thuộc tính margin để định nghĩa nhanh cho cả 4 hướng, thay vì phải định nghĩa riêng lẻ 4 hướng top, right, bottom, left. Tuy nhiên trong một số trường hợp thì bạn sẽ chỉ muốn dùng 1 hướng mà thôi.
Giải thích khái niệm Box Model là gì?
Mỗi phần tử trong 1 trang web đều là một khối chữ nhật riêng biệt. Box model được hiểu là sự chiếm không gian của phần tử trong trang web, nó là tổng của:content: Nội dung của phần tửborder: Đường viền. padding: Khoảng đệm (khoảng cách từ border đến content )
CSS Model là gì?
Về cơ bản mô hình hộp CSS là một chiếc hộp bao xung quanh phần tử HTML, gồm lề, đường viền, padding và nội dung bên trong. Hình ảnh dưới đây cho thấy vị trí và mối liên hệ giữa các thành phần này. Giải thích các thành phần: Content - nội dung trong hộp, nơi hiển thị văn bản và hình ảnh.
