Le modèle de boîte

• Les balises inline : c'est le cas par exemple des liens <a></a>.
• Les balises block : c'est le cas par exemple des paragraphes <p></p>.

• block : une balise de type "block" sur votre page web crée automatiquement un retour à la ligne avant et après. Il suffit d'imaginer tout simplement un bloc. Votre page web sera en fait constituée d'une série de blocs à la suite les uns des autres. Mais vous verrez qu'en plus, il est possible de mettre un bloc à l'intérieur d'un autre, ce qui va augmenter considérablement nos possibilités pour créer le design de notre site !
• inline : une balise de type "inline" se trouve obligatoirement à l'intérieur d'une balise "block". Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur la même ligne (c'est pour cela que l'on parle de balise "en ligne").

• Sur fond bleu, vous avez tout ce qui est de type block.
• Sur fond jaune, vous avez tout ce qui est de type inline.

Quelques exemples

Les balises universelles

• <span></span> (inline)
  
• <div></div> (block)

Respectez la sémantique !

• Exemple d'un span inutile : <span class="important">. Je ne devrais jamais voir ceci dans un de vos codes alors qu'il existe la balise <strong> qui sert à indiquer l'importance !
• Exemple d'un div inutile : <div class="titre">. Ceci est complètement absurde puisqu'il existe des balises faites spécialement pour les titres (<h1>, <h2>...)

• width : c'est la largeur du bloc. A exprimer en pixels (px) ou en pourcentage (%).
• height : c'est la hauteur du block. Là encore, on l'exprime soit en pixels (px), soit en pourcentage (%).

1
2
3
4

p
{
    width: 50%;
}

1
2
3
4

p
{
   width: 250px;
}

Minimum et maximum

• min-width : largeur minimale
• min-height : hauteur minimale
• max-width : largeur maximale
• max-height : hauteur maximale

1
2
3
4
5

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

• Les marges intérieures
• Les marges extérieures

• L'espace entre le texte et la bordure est la marge intérieure (en vert).
• L'espace entre la bordure et le prochain bloc est la marge extérieure (en rouge).

• padding : indique la taille de la marge intérieure. A exprimer en général en pixels (px).
• margin : indique la taille de la marge extérieure. Là encore, on utilise le plus souvent des pixels.

1
2
3
4
5
6

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

1
2
3
4
5
6
7

p
{
    width: 350px;
    border: 1px solid black;
    text-align: justify;
    padding: 12px; /* Marge intérieure de 12px */
}

1
2
3
4
5
6
7
8

p
{
   width: 350px;
   border: 1px solid black;
   text-align: justify;
   padding: 12px;
   margin: 50px; /* Marge extérieure de 50px */
}

Essayer !

Mais ??? Une marge s'est rajoutée à gauche aussi !

En haut, à droite, à gauche, en bas... Et on recommence !

• top : haut
• bottom : bas
• left : gauche
• right : droite

• margin-top : marge extérieure en haut.
• margin-bottom : marge extérieure en bas.
• margin-left : marge extérieure à gauche.
• margin-right : marge extérieure à droite

• padding-top : marge intérieure en haut.
• padding-bottom : marge intérieure en bas.
• padding-left : marge intérieure à gauche.
• padding-right : marge intérieure à droite.

Centrer des blocs

• Donnez une largeur au bloc (avec la propriété width)
• Indiquez que vous voulez des marges extérieures automatiques, comme ceci : margin: auto;

1
2
3
4
5
6
7
8
9

p
{
    width: 350px; /* On a indiqué une largeur (obligatoire) */
    margin: auto; /* On peut donc demander à ce que le bloc soit centré avec "auto" */
    border: 1px solid black;
    text-align: justify;
    padding: 12px;
    margin-bottom: 20px;
}

Essayer !

overflow : couper un bloc

1
2
3
4
5
6
7

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

Horreur ! Le texte dépasse des limites du paragraphe !

• visible (par défaut) : si le texte dépasse les limites de taille, il reste visible et sort volontairement du bloc.
• hidden : si le texte dépasse les limites, il sera tout simplement coupé. On ne pourra pas voir tout le texte.
• scroll : là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette fois, le navigateur mettra en place des barres de défilement pour qu'on puisse voir tout le texte. C'est un peu comme un cadre à l'intérieur de la page.
• auto : c'est le mode "pilote automatique". En gros, c'est le navigateur qui décide ou pas de mettre des barres de défilement (il n'en mettra que si c'est nécessaire). C'est la valeur que je conseille d'utiliser le plus souvent.

1
2
3
4
5
6
7
8

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

Essayer !

word-wrap : couper les textes trop larges

1
2
3
4

p
{
    word-wrap: break-word;
}