Introduction to the CSS Box Model

Box Model trong CSS khá phức tạp, đặc biệt khi các browser khác nhau diễn dịch hơi khác nhau trước kia. Box Model mô tả cách mà box quanh một element đặt như thế nào và các thuộc tính như lề (margin), khoảng (padding) và khung (border) thể hiện ra sao.

Inline vs. Block elements

Điều đầu tiên và qan trọng nhất bạn cần biết đó là sự khác biệt giữa element inline và block. Về cơ bản, mọi element trong HTML có ba trạng thái: block, inline và không hiển thị. Cái cuối cùng dùng cho các tag không cần hiển thị trong trình duyệt ví dụ: thẻ meta ...

Sự khác biệt giữa inline và block thú vị hơn. Block có chiều ngang trải dài không quan tâm đến chiều dọc là bao nhiêu. Cho nên một element ở mức block sẽ tự động đưa vào nội dung ở hàng mới, mặc định là hai element là block không thể đứng gần nhau.

Khác với block, inline không xuống dòng. Inline lấy khoảng cần thiết và sau đó inline khác có thể hiển thị.

A good way to remember the difference is to think of an inline element as a line of text/sentence and a block level element as a paragraph - the sentence can stand together with other sentences to form an entire paragraph, but the paragraph breaks the natural flow to create space around it.

Một element có thể là invisible, inline hay block. Ví dụ về inline là thẻ span, link, image hay trong form có input. Block có thể là thẻ div, header, p, list hay table.

With all this theory taken care of, I would like to present you with a simple example showing the difference in action:

<style type="text/css">
.box {
	background-color: Orange;
}
</style>

<div class="box">Block 1</div><div class="box">Block 2</div>
<br>
<span class="box">This is an inline element... </span><span class="box">and so is this</span>

Try out this example and notice how the elements, despite using the same CSS class, behaves completely different, just as described above. Most notably, the div elements (which are block level elements by default) uses the entire available width, while the span level elements (which are inline elements by default) can stand right next to each other and be part of the same sentence.

Inline elements and sizes/margins

Một điều quan trọng cần chú ý là khi dùng margin và size trong inline thì thuộc tính width và height bị từ chối . Thay vì vậy, bạn có thể dùng line-height.

You will also see margins and paddings acting differently than you might be used to, when applied to inline elements. In general, if you need to create space between or inside elements, you may want to use a block level element instead. If you're trying to use inline elements because you want two or more elements to stand next to each other, then a floating block level element might be more suitable - more on that later in this section of the tutorial.

Summary

In this article, we briefly discussed what the CSS Box Model is and then we talked a lot about the difference between inline and block level elements. Remember that while some elements are born as inline elements and others are born as block level elements, this can easily be changed with the display property. This will be explained later.

We also talked about concepts like margins, paddings and borders. If you are not familiar with these concepts, then don't worry - they will be fully explained in the upcoming chapters.