— Publié le 1er mai 2021 —
Positionner des blocs dans une page de site web est tout un art, tout comme maîtriser leur comportement lorsque la taille de l’écran change, ce qui est inévitable aujourd’hui au vu de la proportion de smartphones. Dans un précédent article, nous avons vu comment placer vos éléments dans une page de site grâce aux modèles de boîtes flexibles et à la super CSS, Flexbox. Aujourd’hui, revenons aux bases du positionnement avec les modèles de boîtes simples. Compte tenu du nombre de propriétés à décrire, nous allons diviser cet article en 2 parties. Voici la 1ère !
- position / placement top, right, left, bottom
- float / clear
- clip-path
- vertical-align
- z-index
margin et padding
Poursuivons par ces propriétés qui sont très, mais très fréquemment utilisées. La différence entre padding et margin est une question qui revient souvent et force est de constater qu’il n’est pas toujours facile de l’expliquer. Nous, on aime imager les choses et oui, Jean-François, je vais faire encore faire appel à une notion de déco 😉
Vous possédez une photo que vous voulez encadrer. Vous avez le choix entre choisir un cadre pile à la taille de la photo, on parle de margin. En revanche, si vous souhaitez mettre un passe-partout à l’intérieur du cadre pour mettre en valeur la photo, on parle de padding. Notez que le passe partout va manger votre photo (ou alors il va falloir prendre un cadre de taille supérieure). Nous évitons volontairement de vous parler de la bordure, qui se trouve entre les margin et les padding mais qui ne rentrent pas ds le sujet des boîtes simples.
Dans la pratique, il y a pas mal de cas où utiliser des margin ou des padding revient au même. Pour décoller ce paragraphe de l’image du dessus, j’ai utilisé un padding-bottom de 20px mais j’aurais pu utiliser un margin-bottom de 20px.
En revanche, si vous avez un bloc avec un fond de couleur et que vous voulez décoller votre contenu des limites de ce bloc, alors vous devrez utiliser un padding.
Ces 2 propriétés fonctionnent de la même manière, vous pouvez définir les 4 côtés en une seule fois et vous tournez dans le sens des aiguilles d’une montre en partant du haut, ce qui donne haut / droite / bas / gauche :
ou choisir seulement quelques côtés :
2 dernières choses pour clore ce point :
- On peut saisir les marges en pixels ou en %
- La syntaxe d’un padding ou margin peut s’écrire avec 1, 2, 3 ou 4 valeurs (comme dans notre exemple ci-dessus)
height / width
Intéressons-nous maintenant à la notion de hauteur (height), de largeur (width), de largeur max ou minimum et de hauteur max ou minimum.
Height / Width : ces notions ne tiennent pas compte des padding, bordures et margin. Elles permettent de définir les réelles dimensions d’un bloc. Par défaut, la largeur et la hauteur d’un bloc sont « auto », c’est-à-dire qu’elles s’adaptent au contenu. Si on veut agir dessus, on peut renseigner un %, des valeurs en pixels ou en valeur.
Redimensionnons une image (pour l’exemple, car pour les performances du site, il vaut la mieux redimensionner avant de l’intégrer) dont la taille originale est 600×400 px de 40%.
Ici, nous allons fixer une taille au bloc avec un fond rose qui contient notre texte.
Ce bloc a une largeur de 360px et une hauteur de 240px.
A l’heure de la multiplication des tailles d’écrans, fixer des tailles peut engendre des contraintes et des problèmes d’affichage. Par exemple, une image avec une largeur fixe de 500px ne se verra pas en entier sur un écran d’Iphone 5 ou on aura un ascenseur horizontal (OK, il n’y en a presque plus mais sa largeur de 320px reste une valeur basse quand on adapte les sites sur mobile). Pour pallier à ces soucis, il existe d’autres propriétés que nous allons voir.
Min-height / Max-height / Min-width / Max-width : comme leurs noms l’indiquent, ces propriétés permettent de définir une hauteur minimale et maximale ou une largeur minimale et maximale. Si on utilise les 2 valeurs, on peut même définir un intervalle. Comme précédemment, on peut exprimer ces valeurs en %, en px ou en em. Sachez également qu’elles prennent la main sur une largeur / hauteur déjà exprimées.
Ici, nous écrivons que le bloc « taille-mini » a une largeur et une hauteur minimales de 200px. Même si la largeur initial est définie à 150px, elle sera automatiquement agrandie au minimum à 200px.
A contrario, ce bloc « taille-maxi » a une largeur et une hauteur maximales de 600px. Même si l’écran fait 1920px de large, le bloc ne dépassera pas 600px. Et si la largeur initiale déclarée est de 800px, elle sera recalculée à 600px.
Conclusion
Voilà, vous allez pouvoir commencer à vous entraîner avec ces premiers éléments de positionnement, la suite arrive dans 15 jours dans un second article.
Si vous avez des questions, posez-les en commentaires ci-dessous.
Et n’hésitez pas à partager vos propres retours d’expérience !
Laisser un commentaire