2 files changed, 192 insertions, 0 deletions
diff --git a/files/vi/web/css/css_box_model/index.html b/files/vi/web/css/css_box_model/index.html
new file mode 100644
index 0000000000..08152c9c16
--- /dev/null
+++ b/files/vi/web/css/css_box_model/index.html
@@ -0,0 +1,115 @@
+---
+title: CSS Basic Box Model
+slug: Web/CSS/CSS_Box_Model
+tags:
+  - CSS
+  - CSS Box Model
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Box_Model
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Basic Box Model</strong> is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the <a href="/en-US/docs/Web/CSS/Visual_formatting_model">visual formatting model</a>.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<h4 id="Properties_controlling_the_flow_of_content_in_a_box">Properties controlling the flow of content in a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("overflow")}}</li>
+ <li>{{CSSxRef("overflow-x")}}</li>
+ <li>{{CSSxRef("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_size_of_a_box">Properties controlling the size of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("height")}}</li>
+ <li>{{CSSxRef("width")}}</li>
+ <li>{{CSSxRef("max-height")}}</li>
+ <li>{{CSSxRef("max-width")}}</li>
+ <li>{{CSSxRef("min-height")}}</li>
+ <li>{{CSSxRef("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_margins_of_a_box">Properties controlling the margins of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("margin")}}</li>
+ <li>{{CSSxRef("margin-bottom")}}</li>
+ <li>{{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("margin-right")}}</li>
+ <li>{{CSSxRef("margin-top")}}</li>
+ <li>{{CSSxRef("margin-trim")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_paddings_of_a_box">Properties controlling the paddings of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("padding")}}</li>
+ <li>{{CSSxRef("padding-bottom")}}</li>
+ <li>{{CSSxRef("padding-left")}}</li>
+ <li>{{CSSxRef("padding-right")}}</li>
+ <li>{{CSSxRef("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Other_properties">Other properties</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt>
+ <dd>Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt>
+ <dd>Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Visual_formatting_model">Visual formatting model</a></dt>
+ <dd>Explains the visual formatting model.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td>Added <code style="white-space: nowrap;">margin-trim</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/vi/web/css/css_box_model/kien_thuc_co_ban_ve_css_box_model/index.html b/files/vi/web/css/css_box_model/kien_thuc_co_ban_ve_css_box_model/index.html
new file mode 100644
index 0000000000..287d709494
--- /dev/null
+++ b/files/vi/web/css/css_box_model/kien_thuc_co_ban_ve_css_box_model/index.html
@@ -0,0 +1,77 @@
+---
+title: Kiến thức cơ bản về CSS box model
+slug: Web/CSS/CSS_Box_Model/Kien_thuc_co_ban_ve_css_box_model
+tags:
+  - CSS
+  - CSS Box Model
+  - Layout
+translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+---
+<div>{{CSSRef}}</div>
+
+<p>Khi dựng giao diện của một trang web, theo lý thuyết chuẩn của <strong>CSS box model</strong>, engine của trình duyệt thể hiện các element trên trang web dưới dạng một hình chữ nhật. CSS sẽ giúp định nghĩa các thuộc tính như kích thước, vị trí và các thuộc tính khác (màu sắc, màu nền, kích thước của border...) của các element này.</p>
+
+<p>Mỗi element được cấu tạo bởi bốn phần (vùng), các phần này được xác định thông qua các cạnh (đường biên) tương ứng: cạnh ngoài vùng nội dung (<em>content edge)</em>, cạnh ngoài vùng padding (<em>padding edge)</em>, cạnh ngoài vùng border (<em>border edge)</em>, và cạnh ngoài vùng margin (<em>margin edge).</em></p>
+
+<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p>
+
+<p><strong>Vùng nội dung, </strong>được bọc bởi các cạnh ngoài (<em>content edge</em>), là nơi chứa nội dung chính của element như văn bản, hình ảnh, hoặc video. Các thông số về kích thước của vùng này gồm chiều rộng (<em>content width</em>) và chiều cao (<em>content height</em>). Vùng này thường có cả màu nền hoặc ảnh nền.</p>
+
+<p>Nếu thuộc tính {{cssxref("box-sizing")}} được gán giá trị <code>content-box</code> (mặc định) và nếu element này có kiểu hiển thị block, thì kích thước của vùng nội dung có thể được định nghĩa bởi các thông số thuộc tính {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, và {{cssxref("max-height")}}.</p>
+
+<p><strong>Vùng padding</strong>, được bọc bởi các cạnh ngoài (<em>padding edge</em>), bọc lấy bên ngoài vùng nội dung bằng padding của element. Các thông số kích thước của vùng này gồm chiều rộng (<em>padding-box width</em>) và chiều cao (<em>padding-box height</em>).</p>
+
+<p id="padding-area">Độ dày của padding được xác định dựa trên các thuộc tính {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, hay viết tắt là {{cssxref("padding")}}.</p>
+
+<p><strong>Vùng border</strong>, được bọc bởi các cạnh ngoài (border edge), bọc lấy bên ngoài vùng padding bằng border của element. Các thông số kích thước của vùng này gồm chiều rộng (<em>border-box width)</em> và chiều cao (<em>border-box height)</em>;</p>
+
+<p>Độ dày của border được xác định dựa trên thuộc tính {{cssxref("border-width")}}. Nếu thuộc tính {{cssxref("box-sizing")}} được gán giá trị <code>border-box</code>, thì kích thước của vùng border có thể được định nghĩa bởi các thông số thuộc tính {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, và {{cssxref("max-height")}}. Nếu element có background bằng cách gán thuộc tính ({{cssxref("background-color")}} hoặc {{cssxref("background-image")}}),  thì background sẽ tràn ra cả vùng border. Bạn có thể thay đổi trạng thái mặc định này bằng cách sử dụng kèm thuộc tính {{cssxref("background-clip")}}.</p>
+
+<p><strong>Vùng margin</strong>, được bọc bởi các cạnh ngoài (margn edge), bọc lấy bên ngoài vùng border và tạo ra một vùng trống để giãn cách vị trí của element này với các element khác xung quanh. Các thông số kích thước của vùng này gồm chiều rộng (<em>margin-box width)</em> và chiều cao (<em>margin-box height)</em>;</p>
+
+<p>Kích thước của vùng margin được xác định dựa trên các thuộc tính  {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}, hay viết tắt là  {{cssxref("margin")}}. Khi có sự xung đột margin xảy ra (<a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">margin collapsing</a>), sẽ khó xác định chính xác vùng margin của một element vì nó được chia sẻ cho các element với nhau.</p>
+
+<p>Cuối cùng, lưu ý với một elements với thuộc tính hiển thị là inline (inline element), thì khoảng không gian mà nó chiếm dụng (chiều cao) được xác định bởi thuộc tính {{cssxref('line-height')}}, dù cho nó có các thuộc tính border hay padding thêm vào.</p>
+
+<h2 id="Tham_khảo_thêm">Tham khảo thêm</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Containing_block">Layout và containing block trong CSS Box Model</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Cascade">Giới thiệu về CSS Cascade</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade và inheritance trong CSS</a></li>
+</ul>
+
+<h2 id="Đặc_tả_kĩ_thuật">Đặc tả kĩ thuật</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Đặc tả kĩ thuật</th>
+   <th scope="col">Trạng thái</th>
+   <th scope="col">Ghi chú</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#intro')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Chỉnh sửa từ ngữ chính xác hơn, không có thay đổi gì về quan trọng.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName("CSS1","#formatting-model")}}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Các định nghĩa ban đầu.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tham_khảo_thêm_2">Tham khảo thêm</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+</ul>