• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 12/11/2018

The boxes model

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

A web page can be seen as a succession and a stack of boxes, called "blocks." Most of the items seen in the previous chapter are blocks:<header>,<article>,<nav>... But we already knew about other blocks: paragraphs<p>, titles<h1>, etc.

In this chapter, were going to learn how to interact with these blocks just like real boxes. We're going to give them dimensions, lay them out but adjusting their margins, and also learn how to manage their content... to prevent text going outside these blocks!

These are the basic concepts we need to lay out our web site... So pay attention!

Block and inline type tags

In HTML, most tags can be placed in one of two categories:

  • inline tags: this is the case, for example, of links<a></a>.

  • block tags: this is the case, for example, of paragraphs<p></p>.

But how do you tell an inline tag from a block tag?

It's actually quite easy:

  • block: a block tag on your web page automatically creates a line break before and after. You just have to imagine a block. Your web page will in fact consist of a series of blocks, one after the other. But, in addition, you'll see that it's possible to put one block inside another one, which will significantly increase our abilities in creating the design of our website!

  • inline: an inline tag is necessarily located inside a block tag. An inline tag does not create a line return, so the text written inside thus follows on from the previous text on the same line (this is why it's known as an "inline" tag).

To allow you visualize the concept properly, I've created a little diagram in the next figure.

Difference between an inline tag and a block tag
Difference between an inline tag and a block tag
  • Block tags are shown on a blue background.

  • Inline tags are shown on a yellow background.

As you can see, the blocks are underneath each other. They can also be nested within each other (remember, our<section>blocks contain<aside>blocks, for example!).
The inline tag<a></a>is located inside a block tag and the text is inserted on the same line.

A few examples

To help you understand what tags are inline and what tags are block, here's a table listing some common tags.

Block tags

Inline tags

<p>

<em>

<footer>

<strong>

<h1>

<mark>

<h2>

<a>

<article>

<img />

...

...

This table is not all inclusive, far from it. If you want a complete list of all the tags that exist and whether they are inline or block, see the annex giving a list of all HTML tags.

General purpose tags

You already know these as I told you about them a few chapters ago. These are tags that have no particular meaning (unlike<p>which means "paragraph",<strong>which means "important", etc.).
The main advantage of these tags is that aclass(or anid) can be applied to them in CSS when no other tag is appropriate.

There are two generic tags and, coincidentally, the only difference between the two is that one is inline and the other is block:

  • <span></span>(inline) ;

  • <div></div>(block).

Adhere to the semantics

Although general purpose tags are indeed "practical" in some cases, be careful not to overdo them. Be warned straight away: many webmasters use too many<div>and<span>tags and forget that other, more suitable, tags are available.

Here are a couple of examples:

  • Example of an unnecessary span:<span class="important">. I should never see this in one of your codes as the<strong>tag is there to indicate importance!

  • Example of an unnecessary div:<div class="titre">. This is completely absurd as there are tags specially designed for titles (<h1>,<h2>, etc.).

Yes, you'll say that in the end the visual result is the same. I fully agree. But generic tags add no meaning to the page and cannot be understood by the computer. Always use other, more appropriate, tags whenever possible. Google itself recommends this to help you improve the position of your pages in its search results!

Dimensions

Here we're going to work only with block type tags.

To start with, let's look at the size of blocks. Unlike an inline tag, a block has specific dimensions. It has a width and a height. So, not surprisingly, we have two CSS properties:

  • width: is the block width. To be specified in pixels (px) or as a percentage (%).

  • height: is the block height. Which, there again, is specified in pixels (px) or as a percentage (%).

As default, a block takes up 100% of the available width. This can be checked by applying borders or a background color to our blocks (figure below).

Blocks take up all the available width
Blocks take up all the available width

Now let's add a bit of CSS to change the width of paragraphs. The CSS code below says: "I want all my paragraphs have a width of 50%".

p
{
    width: 50%;
}

The result is shown in the figure below.

A paragraph with a 50% width
A paragraph with a 50% width

The percentages will be useful in creating a design that automatically adapts to the visitor's screen resolution.
However, you may need to create blocks with a specific size in pixels:

p
{
   width: 250px;
}

Minimum and maximum

You can specify a block's minimum and maximum dimensions. This is very useful as it allows us to define "limit" dimensions to allow our website to adapt to the various screen resolutions of visitors:

  • min-width: minimum width;

  • min-height: minimum height;

  • max-width: maximum width;

  • max-height: maximum height.

For example, you can specify that paragraphs should occupy 50% of the width and be at least 400 pixels wide in all cases:

p
{
    width: 50%;
    min-width: 400px;
}

See the result by changing the width of your browser window. You'll see that, if it's too small, the paragraph is forced to take up a width of at least 400 pixels.

Margins

You should know that all blocks have margins. There are two types of margins:

  • inner margins;

  • outer margins.

Take a good look at the diagram in the figure below.

Outer and inner margins
Outer and inner margins

I've placed a border around this block to see where it ends better.

  • The space between the text and the border is the inner margin (shown in blue).

  • The space between the border and the next block is the outer margin (shown in red).

In CSS, you can change the size of the margins with the following two properties:

  • padding: indicates the size of the inner margin. Is generally specified in pixels (px).

  • margin: indicates the size of the outer margin. There again, pixels are most often used.

To see the margins clearly, let's take two paragraphs and simply apply a small border to them (figure below):

p
{
    width: 350px;
    border: 1px solid black;
    text-align: justify;
}
Default margins for paragraphs
Default margins for paragraphs

As you can see, as default there's no inner margin (padding). However, there is an outer margin (margin). It's because of this margin that two paragraphs are not stuck together and appear to be separated by a "line break".

Let's suppose I want to add a inner margin of 12 px to the paragraphs (figure below):

p
{
    width: 350px;
    border: 1px solid black;
    text-align: justify;
    padding: 12px; /* Inner margin of 12px */
}
An inner margin added to paragraphs
An inner margin added to paragraphs

Now I want my paragraphs to be more spaced apart. I add themarginproperty to specify a margin of 50 px between two paragraphs (figure below):

p
{
   width: 350px;
   border: 1px solid black;
   text-align: justify;
   padding: 12px;
   margin: 50px; /* Outer margin of 50px */
}

Indeed,margin(likepaddingmoreover) applies to all four sides of the block.
If you want to specify different top, bottom, left and right margins, you have to use more specific properties... The principle is the same as for theborderproperty, as you'll see!

Top, right, left, bottom...

You need to remember the following terms:

  • top;

  • bottom;

  • left;

  • right;

So you can keep all the properties in your head.
All the same, I'll make you a list of properties formarginandpaddingso that you're sure you understand the principle.

Here's the list formargin:

  • margin-top: outer margin at the top;

  • margin-bottom: outer margin at the bottom;

  • margin-left: outer margin on the left;

  • margin-right: outer margin on the right.

And the list forpadding:

  • padding-top: inner margin at the top;

  • padding-bottom: inner margin at the bottom;

  • padding-left: inner margin on the left;

  • padding-right: inner margin on the right.

Centering blocks

Blocks can perfectly well be centered. And a centered design is convenient when you don't know the visitor's resolution.

The rules below have to be followed when centering:

  • give a width to the block (with the propertywidth);

  • specify that you want automatic outer margins, like this:margin: auto;.

Let's try this technique on our small paragraphs (lines 3 and 4):

p
{
    width: 350px; /* We specified a width (mandatory) */
    margin: auto; /* We can thus ask for the block to be centered with auto */
    border: 1px solid black;
    text-align: justify;
    padding: 12px;
    margin-bottom: 20px;
}

And here's the result in the figure below.

The browser thus automatically centers our paragraphs!

When things overflow…

When we begin to define exact dimensions for our blocks, as we have just done, they may sometimes become too small for the text they contain.

The CSS properties we're going to see here have been created precisely to check for overflow... and decide what to do if this happens.

overflow: cutting a block

Suppose you have a long paragraph and you want it (for whatever reason) to be 250 px wide and 110 px high. Let's add a border to it and fill it with text... up to the brim (figure below):

p
{
    width: 250px;
    height: 110px;
    text-align: justify;
    border: 1px solid black;
}
The text goes beyond the paragraph block
The text goes beyond the paragraph block

Oh no! The text goes beyond the paragraph limits!

Indeed so! You asked for exact dimensions, and you've got them! But... the text doesn't fit inside such a small block.

If you want the text to remain within the paragraph limits, you'll have to use the propertyoverflow. These are the values it can take:

  • visible(default value): if the text exceeds the size limits, it remains visible and deliberately goes beyond the block limits.

  • hidden: if the text exceeds the limits, it will simply be cut. We won't be able to see all the text.

  • scroll: there again, the text will be cut if it exceeds the limits. Except that this time, the browser will create scroll bars so that we can read the whole text. It's a bit like a frame within the page.

  • auto: is the "autopilot" mode. Basically, it's the browser that decides whether or not to display the scroll bars (it will only do so if necessary). This is the value that I recommend you use most often.

Withoverflow: hidden;the text is thus cut (you can't see what's below), as in the next figure.

The text is cut at the paragraph limits
The text is cut at the paragraph limits

Let's now tryoverflow: auto;with the CSS code below (result in the figure below):

p
{
    width: 250px;
    height: 110px;
    text-align: justify;
    border: 1px solid black;
    overflow: auto;
}

Scroll bars are added to the paragraph

Bingo! Scroll bars now allow us to see the content that was not visible.

word-wrap: cutting texts that are too big

If you have to place a very long word in a block, and which is too wide to fit, you'll loveword-wrap. This property is used to force the hyphenation of very long words (usually fairly long addresses).

The figure below shows the possible result when a fairly long URL is entered in a block.

The text goes beyond the available width
The text goes beyond the available width

The computer can't "cut" the address as there's no space or hyphen. It doesn't know how to hyphenate.

With the following code, hyphenation will be forced when the text is likely to overflow (figure below).

p
{
    word-wrap: break-word;
}
The text is cut so it doesn't overflow
The text is cut so it doesn't overflow

Summing up

  • There are two main types of tags in HTML:

    • The block type (<p>,<h1>…): these tags create a line feed and as default and occupy all the available width. They follow on from each other from top to bottom.

    • The inline type (<a>,<strong>…): these tags delineate the text in the middle of a line. They follow on from each other from left to right.

  • You can change the size of a block type tag using the CSS propertieswidthandheight.

  • You can define the minimum and maximum allowed for the width and height:min-width,max-width,min-height,max-height.

  • The page items each have inner margins (padding) and outer margins (margin).

  • If there is too much text inside a block of fixed dimensions, the text may overflow. In this case, it may be wise to add scroll bars using theoverflowproperty or for hyphenation usingword-wrap.

Exemple de certificat de réussite
Exemple de certificat de réussite