Introduction to the CSS Box Model

O Modelo de Caixa do CSS é um assunto bem complicado, especialmente porque vários navegadores interpretaram o modelo de formas levemente diferentes no passado. O Modelo de Caixa descreve como a caixa (visível ou não) ao redor de um elemento é apresentada e como coisas como margens, paddings e bordas se comportam.

Inline vs. Block elements

The first and most important thing you need to know about the box model is the difference between inline and block elements. Basically, every HTML element has three different states: Block, Inline or not displayed. The last group is reserved for tags which are not supposed to be visually rendered by the browser, e.g. meta tags, style blocks and so on.

The difference between inline and block elements are more interesting. A block level element will naturally span the entire available width, without concern about how much horizontal space it actually needs. As a result of that, a block level element will automatically push following content to a new line, so by default, two block level elements can't stand next to each other - the first will push the second one to the next line (floating elements will allow this though, but more on that later).

Contrary to the block level element, an inline element does not break the current flow. An inline element only takes up the space it needs to render its content and after that, more inline elements can be displayed.

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.

Elements are born as either invisible, inline or block level elements. An example of inline elements include span tags (the generic inline element), links (anchors), images and form fields like input. Common block level elements include div tags (the generic block level element), header tags (h1-h6), paragraphs, lists and tables.

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

An important thing to be aware of is the fact that inline elements act differently when using margin and size (width/height) properties. First of all, the width and height properties are ignored for inline elements. Instead, you can use the line-height property to make an inline element smaller or bigger, as the space between each line grows or shrinks.

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.