Utilitaires
Scripts
Divers
Jeux
Rechercher
Quillevere.net
Paradigmes informatiques

Pourquoi 2 balises HTML de largeur 50% occupent plus de 100 % ?

06/07/2019

Vous avez peut-être remarqué que deux balises totalisant une taille de 100% dépassent d'un conteneur ayant une taille de 100% ? Par exemple, une balise de 70% et une autre de 30% provoquent l'affichage de la 2ème balise sur la seconde ligne. Ce cas s'applique également avec plus de 2 balises : avec 3 balises de 33%, on a parfois la 3ème balise sur la ligne du dessous. Exemple avec le cas ci-dessous :

<div style="width:100%>
    <div style="width:70%;display:inline-block">Côté 1</div>
    <div style="width:30%;display:inline-block">Côté 2</div>
</div>

L'explication est toute simple : il y a des espaces restant entre les balises et ceux-ci occupent une place provoquant le dépassement des 100%. La  solution pour résoudre le problème est donc que les balises de fin finissent là où commencent les balises début, afin de ne laisser aucun espace vacant. Exemple :

<div style="width:100%">
<div style="width:70%;display:inline-block">Côté 1</div><div style="width:30%;display:inline-block">Côté 2</div>
</div>

Le problème est que cela rend le code HTML moins lisible. Le sujet a été abordé sur Stack Overflow et d'autres solutions sont proposées, comme ajouter des commentaires entre les balises fin et début, comme ceci :

<div style="width:100%>
    <div style="width:70%;display:inline-block">Côté 1</div><!--
--><div style="width:30%;:display:inline-block">Côté 2</div>
</div>
Dernière modification le 06/07/2019 - Quillevere.net

Commentaires

Aucune inscription n'est requise si vous souhaitez

Rechercher sur le site

fr en rss RSS info Informations