Pourquoi les éléments de blocs en ligne s'enroulent-ils à 100 % de largeur, mais pas à 99 % ?

Superposition de blocs en ligne : dilemme d'affichage des éléments de blocs en ligne

En HTML, lorsque l'on vise à obtenir une mise en page à deux colonnes avec une largeur égale à 50 % pour chaque colonne, l'utilisation de la propriété "display: inline-block" semble être une alternative simple aux méthodes flottantes traditionnelles. Cependant, dans certaines conditions, cette approche peut entraîner des conséquences imprévues.

Plus précisément, lorsque les blocs en ligne consomment 99 % de la largeur totale, ils se comportent comme prévu, s'affichant côte à côte horizontalement. Cependant, une fois que la largeur totale atteint 100 %, le deuxième bloc en ligne passe de manière inattendue à la ligne suivante.

Raison derrière l'écart

Ce comportement particulier découle du fait que les blocs en ligne héritent des propriétés d'espace blanc du HTML. Par défaut, le caractère espace blanc existe entre les éléments, et les éléments de bloc en ligne tiennent compte de cet espace dans leur calcul de largeur. Par conséquent, lorsque la largeur totale est précisément de 100 %, y compris l'espace blanc, le deuxième bloc en ligne dépasse la largeur réelle du contenu, ce qui l'oblige à passer à la ligne suivante.

Résolution : supprimer le blanc -space

Pour résoudre ce problème, il faut éliminer l'espace blanc entre les éléments du bloc en ligne. Ce faisant, le calcul de l'attribut width devient plus précis, empêchant le deuxième bloc en ligne de s'étendre au-delà de la largeur du contenu.

Exemple de code

Pour illustrer la solution , considérons le code HTML suivant :

<div>

En supprimant l'espace blanc entre les divs, nous obtenons le comportement souhaité de deux blocs en ligne affichant côte à côte dans une largeur de 50 % pour chacun, même lorsque la largeur totale est de 100 %.

Conclusion

Comprendre l'impact des espaces blancs en ligne Les éléments -block sont cruciaux dans la mise en page CSS. En éliminant tout espace blanc inutile entre ces éléments, les développeurs peuvent garantir que les blocs en ligne se comportent comme prévu, en particulier lorsqu'ils sont confrontés au défi de créer une disposition à deux colonnes avec une largeur égale pour les deux colonnes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!