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

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 :

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 :

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 :