Espacement des éléments à l'intérieur d'un panneau (WrapPanel)
De nombreux sites et applications utilisent WrapPanel pour afficher vos articles. Les éléments sont mis en file d'attente de gauche à droite et lorsqu'il n'y a plus d'espace, ils ont tendance à passer à la ligne suivante.
Par exemple:
Quelle est la meilleure façon de créer cette organisation? Ou cela dépend de ce que je montre? Lorsque vous laissez tous les articles de la même taille et quand peuvent-ils avoir une taille variable? (Figure 1, la recherche sur google images est similaire)
Une similitude est qu'il y a toujours une marge entre les éléments (même petite). Mais pourquoi la plupart des applications partagent du contenu comme celui-ci: 
Et non?
La deuxième option est nettement plus symétrique (marge gauche et marge droite).
Parfois, il est difficile de lire l'intention dans une interface utilisateur sans contexte d'initié pour savoir si quelque chose est une décision consciente ou inconsciente. Nous pourrions très bien attribuer des principes UX valides pour expliquer pourquoi quelque chose est d'une certaine manière, mais il est également possible que ce soit plus accidentel.
Par conséquent, il existe deux réponses possibles à votre question:
En tant que décision de conception consciente , avoir des marges différentes entre les éléments est un exemple d'utilisation de principes de regroupement pour créer une relation entre les éléments en utilisant un espace négatif (comme d'autres réponses ont souligné).
En tant que décision de conception inconsciente , cela peut aussi être aussi simple que cela à quoi cela ressemble lorsque vous utilisez des marges CSS pour des listes fluides où vous ne le faites pas savoir quels éléments se trouvent à la première ou à la dernière position de la ligne.
Le CSS appliqué à chaque élément serait donc le même, c'est-à-dire marge: 10px; Lorsque vous avez deux éléments côte à côte, l'écart entre eux devient la somme de la marge droite et gauche:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Le résultat est plus d'espace blanc entre les éléments voisins que vous n'en avez pour le premier ou le dernier élément de la ligne.
Avec les exemples que vous avez fournis , je dirais que le premier ressemble à une décision de conception consciente tandis que le deuxième exemple (Netflix) est probablement plus représentatif de l'effet cumulatif des marges uniformes dans une liste.
En fait, je pense que votre deuxième exemple est moins symétrique que le premier. Considérez l'espace autour des éléments de votre vue comme appartenant à l'élément, une marge constante autour de chaque élément. Il est alors tout à fait logique qu'il y ait moins (la moitié) autant de marge entre le bord de la vue et le premier élément qu'entre les éléments eux-mêmes. Dans ce dernier cas, vous aurez deux fois la marge, car chaque élément obtient sa propre marge.
Marge différente à l'intérieur et à l'extérieur de l'habillage renforcer le regroupement de conten. En ayant une marge différente (plus petite ou plus large) sur le côté, il devient clair que les images ne continuent pas au-delà de la zone visible, mais le groupe visible formé par les espaces internes de même largeur est entièrement visible.
En outre, il n'y a souvent pas d'espace sur les côtés de l'enveloppe, mais uniquement à l'intérieur des colonnes (espaces). Votre exemple montre en fait que: la marge sur le côté est appliquée à la page entière, pas seulement à l'habillage comme vous le montrez dans le filaire.