Trong css để thiết lập lề cho mô hình hộp ta dụng thuộc tính

Question

Mô hình hộp (Box model)

Một phần tử HTML được coi là một Box.

Nội dung chính Show

Mô hình hộp (Box model)
Width và Height của một phần tử HTML
Mô hình hộp trong CSS
Chiều rộng và chiều cao của một phần tử:

Mô hình hộp (Box model) có nghĩa là một phần tử HTML sẽ bao gồm các thành phần: margin, border, padding, và content (nội dung của phần tử).

Mô hình hộp (Box model) cho phép chúng ta thêm bo viền xung quanh phần tử , và xác định khoảng cách giữa các phần tử.

Hình ảnh dưới đây minh họa cho mô hình hộp (Box model)

Margin

Border

Padding

Content (nội dung của phần tử)

Giải thích các thành phần trên:

Margin - là phần nằm bên ngoài của border. Margin trong suốt.
Border - là đường viền bao xung quanh của padding và content.
Padding - là phần bao xung quanh content (nội dung của phần tử), nằm giữa padding và content.
Content - là nội dung thực tế của phần tử

div {
    border:1px solid black;
    padding:30px;
    margin: 20px;
}

Xem ví dụ

Width và Height của một phần tử HTML

Để thiết lập chính xác width và height của một phần tử hiển thị đúng trên tất cả trình duyệt, trước hết bạn cần hiểu rõ về mô hình hộp (Box model).

Quạn trọng: Khi bạn thiết lập thuộc tính width và height của các phần tử bằng CSS, bạn cần thiết lập width và height của phần nội dung. Để tính toàn kích thước đầy đủ của phần tử, bạn cần phải tính thêm cả padding, border và margin.

Dưới đây là công thức tính tổng Width (Height) của một phần tử HTML:

Tổng width = width + left margin + right margin + left border + right border + left padding + right padding;
Tổng height = height + top margin + bottom margin + top border + bottom border + top padding + bottom padding;

div {
    width:300px;
    height:300px;
    padding: 50px;
    border:10px solid black;
}

Xem ví dụ

Tại sao việc xác định chính xác tổng width (height) lại quan trọng ?<

:

Ví dụ: Bạn muốn tạo một cái hộp có chiều rộng là 300px với độ dày đường viền là 50px. Nhưng khi xác định width thì bạn chỉ cho 300px, vậy tức là sai rồi, thử xem sai như thế nào nhé!

div {
    width:300px;
    border:50px solid black;
}

Xem ví dụ

Nội dung

Mô hình hộp trong CSS
- Ví dụ 1
Chiều rộng và chiều cao của một phần tử:
- Ví dụ 2

Mô hình hộp trong CSS

Tất cả các phần tử HTML có thể được coi là các hộp (box). Trong CSS, thuật ngữ “mô hình hộp” (hay box model) được sử dụng khi nói về thiết kế và bố cục.

Mô hình hộp trong CSS về cơ bản là một hộp bao quanh phần tử HTML. Nó bao gồm: lề (margin), viền (border), phần đệm (padding) và nội dung (content). Hình ảnh dưới đây minh họa mô hình hộp:

Giải thích:

Content – Nội dung của hộp, nơi văn bản và hình ảnh hiển thị
Padding – Phần đệm, xác định khoảng không gian giữa nội dung hiển thị của một phần tử với đường viền của nó
Border – Đường viền bao quanh phần đệm và nội dung
Margin – khoảng cách từ phần tử được chọn ra phía bên ngoài của thành phần đó.

Mô hình hộp cho phép chúng ta thêm 1 đường viền bao xung quanh các phần tử và xác định không gian giữa các phần tử.

Ví dụ 1


div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Chiều rộng và chiều cao của một phần tử:

Để thiết lập chính xác chiều rộng và chiều cao của một phần tử trong tất cả các trình duyệt, bạn cần biết mô hình hộp hoạt động như thế nào.

Quan trọng: Khi bạn đặt thuộc tính chiều rộng và chiều cao của một phần tử bằng CSS, bạn chỉ cần đặt chiều rộng và chiều cao của vùng nội dung. Để tính kích thước đầy đủ của một phần tử, bạn phải cộng thêm phần đệm, đường viền và lề.

Ví dụ 2

Đây là phần tử <div> có tổng độ rộng là 350px:


div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

Đây là phần tính toán:

320px (độ rộng thẻ div)
+ 20px (trái + phải của phần đệm)
+ 10px (trái + phải của viền)
+ 0px (trái + phải của lề)
= 350px

Tổng chiều rộng của một phần tử được tính như sau:

Tổng chiều rộng (width) của phần tử = chiều rộng (width) + đệm trái (left padding) + đệm phải (right padding) + viền trái (left border )+ viền phải (right border) + lề trái (left margin) + lề phải (right margin)

Tổng chiều cao của một phần tử được tính như sau:

Tổng chiều cao (height) phần tử = chiều cao (height) + phần đệm trên cùng (top padding) + phần đệm dưới (bottom padding) + viền trên (top border) + viền dưới (bottom border) + lề trên (top margin) + lề dưới (bottom margin)

programming css Box model CSS Box Model box-sizing trong css Box HTML