[Résolu] Margin-top sur un lien <a> en dessous d'un paragraphe

Bonjour à tous,

J'ai bien cherché, mais je ne trouve pas de cas similaire sur le forum.

J'ai un paragraphe <p> suivi d'un lien <a>. Je souhaiterais appliquer une marge supérieure ("margin-top") à mon lien pour qu'il ne soit pas collé au paragraphe:

<p>
     bla bla blabla bla blabla bla blabla bla blabla bla blabla bla 
     blabla bla blabla bla blabla bla blabla bla blabla bla blabla 
     bla blabla bla blabla bla bla
</p>
<a style="margin-top:50px;" class="boutonRond" href="blabla">
     <span>En savoir plus</span>
</a>

Le soucis, c'est que ma marge ne s'applique pas (dans aucun navigateur testé), donc je suppose qu'il y a une subtilité (le lien reste collé au paragraphe).

En mettant un "margin-bottom" sur le paragraphe, ça marche. Mais je voudrais comprendre

La page en live: cliquez ici (c'est tout en bas de la page).

Merci d'avance pour le coup de main
Modifié par jiber2fr (04 Oct 2009 - 13:43)

Hello,

Passe simplement ton lien en display:block

C'est une solution, mais elle m'oblige a donner une largeur à mon lien (sinon il prendra toute la largeur).

On ne peut pas mettre une marge entre un block et un élément inline ? Pourquoi ça marche en mettant un margin-bottom sur le paragraphe ?

Merci

Non les élements inline ne peuvent avoir que des marges latérales.

Il faut soit :

1/ mettre une marge basse à ton p
2/ passer ton a en block
3/ (attention ruse de sioux) mettre un padding-top sur ton a
Modifié par Ywg (04 Oct 2009 - 12:28)

Salut Ywg,

Ywg a écrit :
Non les élements inline ne peuvent avoir que des marges latérales.

Il y a une spec qui l'indique quelque part ?

J'aimerais bien savoir s'il s'agit d'une règle générale (et donc si c'est un comportement normal), ou si c'est un cas particulier.

(Sinon, dans mon cas ta ruse de sioux ne convient pas car j'ai un background sur le lien, donc je vais mettre une marge basse à mon paragraphe).

Merci

http://www.w3.org/TR/CSS21/box.html#margin-properties

a écrit :
These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.

PS : Sinon pour ton background tu peux peut être compenser le padding avec un background-position ?
Modifié par Ywg (04 Oct 2009 - 12:50)

Merci pour le lien. Par contre, tu sais ce que ça veut dire "non-replaced inline elements" ? Je suppose que ça signifie que dans certains cas les marges haut/bas sont applicables sur les éléments inline, mais quels cas ?

Salut,

jiber2fr a écrit :
Par contre, tu sais ce que ça veut dire "non-replaced inline elements" ?

Extrait de Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne :

a écrit :
Les éléments "remplacés" sont les seuls qui possèdent des dimensions (height, width) par défaut. Il s'agit des éléments <img>, <input>, <textarea>, <select> et <object>.

Modifié par Heyoan (04 Oct 2009 - 14:08)

C'est une subtilité que j'ignorais. Merci Heyoan (et Raphael).

Salut,

En passant je te conseille de modifier légèrement ta structure HTML pour quelque chose de plus sémantique.
Et placer pour cela le lien dans un paragraphe ou une liste (à un élément) non-ordonnée.