Espacer 2 éléments
Jean
-
Jean -
Jean -
Bonsoir,
j'ai une liste HTML qui se présente comme ceci:
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
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
A voir également:
- Css espacer deux éléments
- Photoshop elements gratuit - Télécharger - Retouche d'image
- Deux ecran pc - Guide
- Comment faire deux colonnes sur word - Guide
- Nombre de jours entre deux dates excel - Guide
- Deux whatsapp sur un téléphone - Guide
2 réponses
Bonjour,
mais pour etre un tout petit plus propre (espace entre les liens)
La valeur 10px, tu la remplaces par l'espace que tu veux (ex : 30px)
Voila voila
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
Merci beaucoup ça fonctionne.
Une question cependant:
Quelle est la différence entre
et
?
Le résultat ne sera t-il pas systématiquement toujours le même?
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?
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 :
puis par la suite une spécificité propre a l'élément (balise html) :
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 :
coté html, le codage est plus léger puisque :
aura les memes comportement que :
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 :)
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 :)
