margin ne marche pas avec la balise <span> ?

[Nenex]

Slt

Quant j'ai un texte qui doit etre encadre et qui possede un titre j'utilise ce code HTML :

<div class="encadrement">   <span class="titre-encadrement">Titre</span>   <p>Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis.</p></div>

et ce code CSS :

.encadrement {	background-color:#f9fcde;	margin: 0 20px 20px 20px ;	border: #000 1px solid ;		border-radius: 15px;    -moz-border-radius: 15px;    -webkit-border-radius: 15px;		box-shadow: 3px 3px 6px 2px #a9a9a9 ;}.encadrement p { padding: 0 20px; }.titre-encadrement {	background-color:#000;	color:#fff;	font-family: 'monteiro_lobatoregular';	font-size:1.1em;	padding: 4px 20px 4px 10px ;		border-radius: 15px 0 25px 0 ;    -moz-border-radius: 15px 5px 0 0  ;    -webkit-border-radius: 15px 5px 0 0  ;}

je voulais mettre un peu plus d'espace entre le titre et le 1° paragraphe en rajoutant un margin-bottom, mais ca ne fait absolument rien ! aucun espace ne se rajoute entre les 2 !!!! par contre avec le margin-left le span est decale.
Le margin ne marche pas avec le span ??? car j'ai changer le span en balise p et la le bottom marche impec. Je prefere le span car je veux que le conteneur du titre prenne sa largeur suivant le contenu.

Merci d'avance pour votre aide.

[captain_torche]

Le span est par défaut une balise de type inline. Rajoute un display: block; ou utilise une balise de type block (Pourquoi pas un titre Hx ?)

[Nenex]

Mais si je rajoute un display: block; mon span ne se redimentionne pas suivant son contenu. Pareil si je remplace mon span par une balise Hx.

[captain_torche]

Alors mets le en display: inline-block;

[Nenex]

Ha oui le inline-block, j'avais pas pense a lui ! merci pour ton aide

[captain_torche]

Pas de souci

[Portekoi]

Dans ce cas, autant utiliser un div qui elle est une valise "conteneur"...

[Dudu]

Dans ce cas, autant surtout utiliser une balise de titre : ce serait beaucoup plus logique.

[Nenex]

Le probleme (dans ce cas bien precis) avec les balises Hx c'est qu'elles doivent se suivre logiquement, sans saut de niveau. Si j'utilise la balise h5 (mes autres Hx sont deja utilise pour les titres) et que je doit mettre, par exemple, un texte encadre avec un titre entre 2 balise h3 c'est pas top pour la semantique. C'est pour ca que j'ai prefere mettre un inline-block.

[captain_torche]

Un titre "mal rangé", sémantiquement parlant, c'est tout de même mieux qu'une balise vide de sens

[Nenex]

Pourquoi mon titre dans un span est vide de sens ?

[captain_torche]

Les balises <div> et <span> sont deux balises entièrement vides de tout sens : elles ne définissent rien quant à leur contenu.

Pour faire un paragraphe de texte, on utilise <p>, de même qu'une balise <h1> à <h6> pour un titre, en fonction de son importance.

C'est utile pour le référencement, bien entendu, mais aussi pour des questions d'accessibilité : un internaute qui utiliserait un logiciel de lecture d'écran à cause d'un handicap visuel, naviguerait beaucoup plus facilement sur ton site si la sémantique est mieux respectée.

[Nenex]

Ha c'est dans ce sens ( ) que tu dit qu'elle est vide de sens. Justement, c'est pas mieux de mettre le titre de l'encadrement dans une balise qui ne definie rien, plutot que dans une balise qui est importante dans la hierarchie de la page (la balise Hx) et pourrait etre defavorisante pour le referencement et l'accessibilite ?

[captain_torche]

On parle bien d'un titre, là ? Pourquoi ça devrait être préjudiciable de le déclarer comme tel ?

[Nenex]

Oui c'est bien un titre. C'est pas le fait de l'employer en tant que tel. C'est le fait qu'un texte encadre peut se trouver n'importe ou dans une page comportant plusieurs Hx. Exemple :

<h1>Titre</h1>


<h2>Titre</h2>


<h3>Titre</h3>


<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>


<div class="encadrement">

    <h5>Titre de l'encadrement</h5>

    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

</div>


<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>


<h3>Titre</h3>


<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>


<h4>Titre</h4>


<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>


<h3>Titre</h3>


<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

Si on respecte les regles de l'accessibilite et du referencement, cette balise h5 ne doit pas etre a cet endroit. Ca devrait etre une balise h4. Sauf que dans mon cas j'utilise deja la balise h4 pour d'autre titre. Je sais pas si j'explique bien comment je vois le truc .

Modifié 11 Mars 2015 par Nenex

[captain_torche]

Oui, je vois très bien ce que tu veux dire : ton code ne respecte pas une hiérarchie de titres parfaite.

Mais à mon sens, c'est une "faute" moins importante que de perdre toute la sémantique apportée par la balise.

[Nenex]

Ok je vois aussi se que tu voulais dire. Vaut mieux utiliser une balise qui "veut dire quelque chose" mais qui sera mal placer, plutot qu'une balise "qui ne veut rien dire".

[captain_torche]

Exactement

[Nenex]

Je comprend mieux ton raisonnement maintenant . Ce qui fait que je vais modifier mon code et aussi changer la meilleur reponse de cette discution.