Espacer 2 éléments

Jean -

Bonsoir,

j'ai une liste HTML qui se présente comme ceci:

<ul>
	<li class="subitem">Contenu 1<a href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></li>
	<li class="subitem">Contenu 2<a href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></li>
	<li class="subitem">Contenu 3<a href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></li>
</ul>

Je voudrais espacer d'un certain nombre de pixel chacun de mes titres (Contenu #) de leurs 2 images situés à leur droite.

Comment procéder dans mon code CSS ?

Merci

Afficher la suite

2 réponses

inspiring

Bonjour,

ul li.subitem img {
margin-left:10px;
}

mais pour etre un tout petit plus propre (espace entre les liens)

<ul>
	<li class="subitem">Contenu 1<a class="imglink" href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></li>
	<li class="subitem">Contenu 2<a class="imglink" href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></li>
	<li class="subitem">Contenu 3<a class="imglink" href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></li>
</ul>

ul li.subitem .imglink {
margin-left:10px;
}

La valeur 10px, tu la remplaces par l'espace que tu veux (ex : 30px)

Voila voila

Réponse 2 / 2
Jean
Merci beaucoup ça fonctionne.

Une question cependant:

Quelle est la différence entre
```
ul li.subitem .imglink {

}
```
et
```
ul .subitem .imglink {

}
```
?

Le résultat ne sera t-il pas systématiquement toujours le même?
0
1. inspiring
  
  dans l'immediat si, c'est identique. C'est juste une habitude de codage permettant d'assigner une classe a un élément spécifique.
  Je m'explique :
  
  Une classe peut posséder des spécificités globales :
  
  .subitem .imglink { padding:6px; border:1px solid #000 background:#17b3cb }
  
  puis par la suite une spécificité propre a l'élément (balise html) :
  
  span.subitem .imglink { margin:10px 20px; display:block } div.subitem. imglink { margin:0px 5px }
  
  avec une meme classe, un élément div aura sa propriété margin différente de span. Ce qui m'évite de créer une multitude de classe tel :
  
  .margin-span { margin:10px 20px } .margin-div { margin:0px 5px }
  
  coté html, le codage est plus léger puisque :
  
  <div class="subitem">Contenu 1<a class="imglink" href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></div> /*ou*/ <span class="subitem">Contenu 1<a class="imglink" href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></div>
  
  aura les memes comportement que :
  
  <div class="subitem margin-div">Contenu 1<a class="imglink" href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></span> /*ou*/ <span class="subitem margin-span">Contenu 1<a class="imglink" href="#"><img src="images/delete.png"></a><a href="#"><img src="images/edit.png"></a></span>
  
  Dans le cas d'une liste ce n'est pas tellement adaptée mais c'est une habitude d'écriture :)
  
  Cette pratique est très utile mais ne s'utilise pas dans tout les cas
  
  ...J'ai un doute sur la clarté de mon explication :)
  
  0
2. Jean
  
  Après plusieurs relectures ça passe ;)
  
  Merci et bonne journée
  
  0

Espacer 2 éléments

2 réponses

Discussions similaires

Newsletters