Différencier les balises de type block
et de type inline
En HTML, la plupart des balises peuvent se ranger dans l'une ou l'autre de ces deux catégories :
block
: ce type de balise crée automatiquement un retour à la ligne avant et après ;inline
: ce type se trouve obligatoirement à l'intérieur d'une baliseblock
.
Pour bien visualiser le concept, voici un petit schéma :
Comme vous pouvez le voir, les blocs sont les uns en dessous des autres. On peut aussi les imbriquer les uns à l'intérieur des autres : souvenez-vous, un bloc <main>
contient par exemple des blocs <section>
, qui eux-mêmes peuvent contenir des <div>
.
Quant à la balise <a></a>
(qui est de type inline
), elle se trouve à l'intérieur d'une balise block
, et le texte vient s'insérer sur la même ligne.
Faites bon usage des balises universelles <span>
et <div>
J'en profite pour vous parler à nouveau des balises universelles. Vous les connaissez déjà car je vous les ai présentées à plusieurs reprises. Ce sont des balises qui n'ont aucun sens particulier. Le principal intérêt de ces balises est que l'on peut leur appliquer une class
(ou un id
) pour le CSS quand aucune autre balise ne convient.
Il existe deux balises génériques et, comme par hasard, la seule différence entre les deux est que l'une d'elles est inline
et l'autre est block
:
La balise
<span>
(qui est de typeinline
).La balise
<div>
(qui est de typeblock
).
Le résultat visuel est le même, mais les balises génériques n'apportent aucun sens à la page, et ne peuvent pas être comprises par l'ordinateur. Utilisez toujours d'autres balises plus adaptées quand c'est possible.
Maintenant que vous comprenez la différence entre inline et block , nous allons apprendre à dimensionner des éléments en CSS ! Nous allons ici travailler uniquement sur des balises de type block
.
Pour commencer, intéressons-nous à la taille des blocs.
Dimensionnez les éléments avec width
et height
Contrairement à un inline
, un block
peut avoir une largeur et une hauteur précises grâce à ces deux propriétés CSS :
width
(largeur du bloc).height
(hauteur du bloc).
On les exprime en pixels px
ou en pourcentage %
.
On peut le vérifier en appliquant à nos blocs des bordures ou une couleur de fond :
Maintenant, rajoutons un peu de CSS afin de modifier la largeur des paragraphes. Si on veut que tous les paragraphes aient une largeur de 50 %, on écrira en CSS :
p {
width: 50%;
}
Le résultat est visible juste en dessous :
Toutefois, il se peut que vous ayez besoin de créer des blocs ayant une dimension précise en pixels, par exemple pour reprendre un design très précis. Essayez le bout de code suivant pour voir :
p {
width: 250px;
}
Définissez des marges avec margin
et padding
Tous les blocs possèdent des marges (intérieures et extérieures) :
En CSS, on peut modifier la taille des marges avec deux propriétés :
margin
(taille de la marge extérieure)padding
(taille de la marge intérieure).
Pour bien comprendre la différence, faisons quelques tests.
Pour l'occasion, j'ai rédigé dans le fichier HTML des paragraphes de texte en lorem ipsum (du faux texte). Ensuite, dans le fichier CSS, j'ai donné au bloc p
une largeur de 350px
et j'ai ajouté une couleur jaune avec la balise background-color
pour qu'on visualise bien la différence entre les différentes marges :
p {
width: 350px;
background-color: #F1C864;
text-align: justify;
}
Voilà ce qu'on obtient avec ce code :
Comme vous pouvez le constater, il n'y a par défaut pas de marge intérieure (padding
) dans le bloc du paragraphe, (on le voit bien car il a un fond jaune et que les bordures sont collées au texte).
En revanche, il y a une marge extérieure (margin
), on la voit bien car elle espace les paragraphe entre eux, avec une marge blanche (couleur du fond de la page par défaut). C'est cette marge qui fait que deux paragraphes ne sont pas collés, et qu'on a l'impression de “sauter une ligne”.
Ajoutez une marge intérieure avec la propriété CSS padding
Pour ajouteraux paragraphes une marge intérieure (padding
) de 16px
par exemple, on écrit :
p {
width: 350px;
background-color: #F1C864;
text-align: justify;
padding: 16px;
}
On obtient alors :
Ajoutez une marge extérieure avec la propriété CSS margin
Maintenant, si on veut que nos paragraphes soient encore plus espacés entre eux, on rajoute la propriété margin
. Demandons par exemple 50px
de marge entre deux paragraphes :
p {
width: 350px;
background-color: #F1C864;
text-align: justify;
padding: 16px;
margin: 50px;
}
On obtient :
Mais ??? Une marge s'est rajoutée tout autour aussi, pas seulement entre les deux paragraphes !?
Eh oui, margin
(comme padding
d'ailleurs) s'applique aux quatre côtés du bloc.
Si vous voulez spécifier des marges différentes en haut, en bas, à gauche et à droite, il va falloir utiliser des propriétés plus précises… Le principe est le même que pour la propriété border
, vous allez voir !
Spécifiez les propriétés margin
et padding
Vous allez avoir besoin d'un minimum de vocabulaire en anglais ici :
top
: haut ;bottom
: bas ;left
: gauche ;right
: droite.
Voyez ce que cela donne dans le schéma ci-dessous :
Centrez vos blocs avec width
et margin: auto;
Pour centrer des blocs, il faut respecter les règles suivantes :
donner une largeur au bloc avec la propriété
width
;indiquer
margin: auto;
(les marges extérieures seront alors automatiques, et permettront de centrer le contenu.
Essayons cette technique sur nos paragraphes, en ajoutant simplement une ligne au CSS :
p {
width: 350px;
background-color: #F1C864;
text-align: justify;
padding: 16px;
margin: auto;
}
Et on obtient :
À vous de jouer !
Vous allez maintenant pouvoir vous faire la main sur le site de Robbie Lens, et mettre en pratique ce que vous venez d'apprendre ! Dans la branche de départ de l'exercice, vous trouverez un bout de CSS qui indique :
* {
margin: 0;
}
Cela sert à réinitialiser les marges par défaut des navigateurs.
À partir de là, vous allez :
ajouter un
padding
auheader
et aufooter
de20px
en haut et en bas, et de50px
à gauche et à droite ;ajouter une section autour du contenu de la page d'accueil ;
ajouter une section autour du contenu de la page
A-propos
;donner à vos sections (pour les futures sections à venir) un
padding
de80px
;créer un
padding
de50px
pourcarre-contenu
;centrer le contenu de la page
A-propos
;aérer le contenu de la page
A-propos
: mettre de la marge au-dessus du sous-titre "Services" et de la liste des compétences.
En résumé
On distingue deux principaux types de balises en HTML :
les balises de type
block
comme<p>
ou<h1>
créent un retour à la ligne et occupent par défaut toute la largeur disponible. Elles se suivent de haut en bas ;les balises de type
inline
comme<a>
ou<strong>
délimitent du texte au milieu d'une ligne. Elles se suivent de gauche à droite.
On peut modifier la taille d'une balise de type
block
avec les propriétés CSSwidth
(largeur) etheight
(hauteur).Les éléments de la page disposent chacun de
padding
(marges intérieures) et demargin
(marges extérieures).On peut centrer le contenu d'un bloc dont la largeur est définie par
width
avecmargin: auto;
Ça va ? Vous avez bien digéré toutes les informations ? Alors accrochez-vous ! Dans le chapitre suivant, on va voir une partie essentielle du CSS moderne : Flexbox. Alors à tout de suite !