Les boites

On peut assimiler une balise à une boite. Elle a une taille, une couleur, un contenu, un espacement avec les autres balises.

Par défaut, il existe deux types de boites, celles qui poussent les autres à la ligne (block) et celles qui peuvent se suivre (inline).

1
<p>coucou</p><p>bonjour<p/>
2
<a>un lien</a> <a>un autre lien</a>

coucou

bonjour

un lien un autre lien

block et inline

Ceci est le principe par défaut, mais le CSS permettra, si nécessaire, de modifier tout ça.

ComplémentÉditeur

width
height
padding
margin
overflow : visible hidden scroll auto

Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente.

L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide

Boite

DéfinitionDimensionnement

Espacements des boites

width : largeur du contenu

height : hauteur du contenu

padding : espace entre le contenu et la bordure

border : bordure

margin : espace entre une boite et celles qui l'entourent

DéfinitionLargeur, hauteur

Par défaut la largeur et la hauteur d'une balise dépend de son contenu. Mais, on peut imposer une largeur et une hauteur aux balises de type block à l'aide des propriétés width et height.

1
div {
2
  width: 200px;
3
  height: 100px;
4
}
width height

On peut définir une largeur et hauteur max ou min.

C'est à dire que l'élément évolue en auto tant qu'il ne dépasse pas la limite.

1
.div1 { max-width: 100px;}
2
.div2 { min-width: 100px;}
3
.div3 { max-height: 100px;}
4
.div4 { min-height: 100px;}

Exemple

1
<p>J'ai une hauteur min de 100px. J'ai une hauteur min de 100px. J'ai une hauteur min de 100px. J'ai une hauteur min de 100px. J'ai une hauteur min de 100px. J'ai une hauteur min de 100px. J'ai une hauteur min de 100px. J'ai une hauteur min de 100px.</p>
2
<p>J'ai une hauteur min de 100px.</p>
1
p {
2
  background-color: burlywood;
3
  width: 250px;
4
  min-height: 100px;
5
}

J'ai une hauteur min de 100px. J'ai une hauteur min de 100px. J'ai une hauteur min de 100px. J'ai une hauteur min de 100px. J'ai une hauteur min de 100px. J'ai une hauteur min de 100px. J'ai une hauteur min de 100px. J'ai une hauteur min de 100px.

j'ai une hauteur min de 100px

min et max

DéfinitionPadding

La propriété padding permet de gérer l'espace entre le contenu et la bordure.

1
div { padding: 10px;}

On peut distinguer les quatre côtés

1
div {
2
  padding-top: 5px;
3
  padding-right: 10px;
4
  padding-bottom: 15px;
5
  padding-left: 20px;
6
}

Propriété raccourcie

1
.div1 { padding: 5px;} // tous
2
.div2 { padding: 5px 10px;} // haut et bas puis droite et gauche
3
.div3 { padding: 5px 10px 15px 20px;} // haut, droite, bas, gauche

Exemple :

1
<div>J'ai un padding de 5px 10px 15px et 20px. J'ai un padding de 5px 10px 15px et 20px. J'ai un padding de 5px 10px 15px et 20px. J'ai un padding de 5px 10px 15px et 20px. J'ai un padding de 5px 10px 15px et 20px.</div>
1
div {
2
  background-color: burlywood;
3
  width: 250px;
4
  border: 2px solid gray;
5
  padding: 5px 10px 15px 20px;
6
}
J'ai un padding de 5px 10px 15px et 20px. J'ai un padding de 5px 10px 15px et 20px. J'ai un padding de 5px 10px 15px et 20px. J'ai un padding de 5px 10px 15px et 20px. J'ai un padding de 5px 10px 15px et 20px.
padding

DéfinitionMargin

La propriété margin permet de gérer l'espace avec les autres balises.

1
div { margin: 10px;}

On peut distinguer les quatre côtés

1
div {
2
  margin-top: 5px;
3
  margin-right: 10px;
4
  margin-bottom: 15px;
5
  margin-left: 20px;
6
}

Propriété raccourcie

1
.div1 { margin: 5px;} // tous
2
.div2 { margin: 5px 10px;} // haut et bas puis droite et gauche
3
.div3 { margin: 5px 10px 15px 20px;} // haut, droite, bas, gauche

Attention, les marges entre deux balises ne s'additionnent pas elles se fusionnent.

C'est à dire qu'il ne reste que la plus grande. Autant pour des balises frères que pour des balises enfants.

Exemple :

1
<p>coucou</p><p>bonjour</p>
2
<a href="">un lien</a> <a href="">un autre lien</a>
1
a, p {
2
  margin: 20px;
3
  border: 2px solid gray;
4
}

coucou

bonjour

un lien un autre lien
margin

DéfinitionOverflow

La propriété overflow permet de gérer le dépassement du contenu des balises de type block.

1
div { overflow: visible;} // le dépassement est visible
2
div { overflow: hidden;} // le dépassement est caché
3
div { overflow: scroll;} // Des barres de defilement apparaissent
4
div { overflow: auto;} //  Des barres de defilement apparaissent que si c'est necessaire

On peut distinguer les dépassements en largeur et en hauteur

1
div { overflow-x: auto;} // largeur
2
div { overflow-y: scroll;} // hauteur

Exemple :

1
<div>
2
  <div></div>
3
  <div></div>
4
  <div></div>
5
  <div></div>
6
</div>
1
div {
2
  width: 300px;
3
  height: 300px;
4
  border: 2px solid gray;
5
  overflow-y: auto;
6
}
7
div div {
8
  background-color: bisque;
9
  width: 200px;
10
  height: 100px;
11
  border: 2px solid gray;
12
}
overflow

DéfinitionBlock et inline

La propriété display permet de modifier le comportement par défaut des boites.

1
<p>coucou</p>
2
<p>bonjour</p>
3
<a href="">un lien</a>
4
<a href="">un autre lien</a>
1
p, a{
2
  margin: 10px;
3
  border: 2px solid gray;
4
p {
5
  display: inline;
6
}
7
a {
8
  display: block;
9
}

coucou

bonjour

un lien un autre lien
block et inline

Le problème est que les boites en ligne ne peuvent pas avoir de taille.

Pour remédier à cette difficulté, on utilise la propriété inline-block

1
<p>coucou</p><p>bonjour</p>
1
p {
2
  width: 100px;
3
  margin: 10px;
4
  border: 2px solid gray;
5
  display: inline-block;
6
}

coucou

bonjour

inline-block

On peut aussi faire disparaître un élément avec la valeur none

1
p {
2
  display: none;
3
}

Les paragraphes de votre page disparaîtront.