Blocs en ligne : explorer leurs propriétés spatiales

Question

Il y a un étrange écart entre les blocs en ligne. Je peux vivre avec jusqu'à ce que je charge plus de contenu avec un appel AJAX et que ce petit écart disparaisse. Je sais qu'il me manque quelque chose ici.

div {
    largeur : 100 px ;
    hauteur : automatique ;
    bordure : 1px rouge uni ;
    contour : 1px bleu uni ;
    marge : 0 ;
    remplissage : 0 ;
    affichage : bloc en ligne ;
}
http://jsfiddle.net/AWMMT/
Comment rendre l'espacement cohérent entre les blocs en ligne ? 
            

Answer 1

http://jsfiddle.net/AWMMT/1/

<div>...</div><div>...</div>
              ^
              |--- 这里没有空格或换行符。

Vos espaces sont des sauts de ligne que le navigateur convertit en « espaces » lors de l'affichage.

Ou vous pouvez essayer de faire quelques petits ajustements en utilisant CSS :

Une flexbox ignorera commodément les espaces entre ses éléments enfants et sera affichée comme un élément de bloc en ligne continu.

http://jsfiddle.net/AWMMT/470/

body { display: flex; flex-wrap: wrap; align-items: end; }

Answer 2

Les espaces sont en HTML. Il existe plusieurs solutions possibles. Du meilleur au pire :

1. Supprimez les espaces réels en HTML (idéalement, le serveur peut le faire pour vous lors de la diffusion du fichier, ou au moins votre modèle d'entrée peut ajouter des espaces de manière appropriée) http://jsfiddle.net/AWMMT/2/
2. Utilisez float: left而不是display: inline-block, mais cela aura un effet néfaste sur la hauteur : http://jsfiddle.net/AWMMT/3/
3. Placez les font-size设置为0，并为内部元素设置适当的font-size du conteneur : http://jsfiddle.net/AWMMT/4/ - C'est très simple, mais vous ne pouvez pas profiter des règles relatives de taille de police (pourcentage, em) sur les éléments internes