Icon css grid

Bonjour,
pour commencer parlons de la structure
Code:

1 2 3 4 5 6 7 8 9 10 11 <span class="action-news"> <div> <span></span><span></span><span></span> </div> <div> <span></span><span></span><span></span> </div> <div> <span></span><span></span><span></span> </div> </span>
celle ci n'est pas conforme, on ne met pas d'élément block (DIV) dans des éléments inline (SPAN).

Parlons du CSS
• pour les DIV il te faut non pas mettre une height:5px mais une line-height:5px.
• pour les SPAN il te faut mettre un vertical-align:top, par défaut ils sont en baseline.

Continuons de parler CSS
• ton motif n'est cependant pas centré dans son conteneur du fait du rajout d'un margin-right:3px sur le dernier SPAN de chaque ligne.
• Tu peux limiter cela en ne mettant un margin-left:3px qu'à partir du 2^éme élément et idem pour le vertical, en ciblant les DIV cette fois, et ainsi ton motif sera centré

Si on résume
• la structure devient
Code:

1 2 3 4 5 6 7 8 9 10 11 <span class="action-news"> <div> <span></span><span></span><span></span> </div> <div> <span></span><span></span><span></span> </div> <div> <span></span><span></span><span></span> </div> </span>
• et le CSS
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 .action-news { position: absolute; padding: 10px; left: 50%; top: 20px; background:#eef; /* juste pour le voir */ } .action-news div { /* height: 5px; /* SUPPRIMER */ line-height: 5px; /* AJOUT */ /* margin-bottom: 3px; /* SUPPRIMER */ } .action-news div +div { margin-top: 3px; /* AJOUT */ } .action-news span { background: #999; display: inline-block; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); /* margin-right: 3px; /* SUPPRESSION */ height: 5px; width: 5px; vertical-align:top; /* AJOUT */ } .action-news span +span { margin-left: 3px; }
Tu aurais également pu réaliser cela en utilisant les pseudo-éléments :before et :after ou encore...