146 votes

SPAN vs DIV (inline-block)

Y a-t-il une raison d'utiliser un <div style="display:inline-block"> au lieu d'un <span> pour mettre en page une page web ?

Puis-je mettre du contenu imbriqué à l'intérieur du span ? Qu'est-ce qui est valide et qu'est-ce qui ne l'est pas ?

Peut-on l'utiliser pour créer un tableau 3x2 ?

<div>
   <span> content1(divs,p, spans, etc) </span>
   <span> content2(divs,p, spans, etc) </span>
   <span> content3(divs,p, spans, etc) </span>
</div>
<div>
   <span> content4(divs,p, spans, etc) </span>
   <span> content5(divs,p, spans, etc) </span>
   <span> content6(divs,p, spans, etc) </span>
</div>

19 votes

Si vous souhaitez obtenir un document xhtml valide, vous ne pouvez pas placer des éléments de niveau bloc à l'intérieur d'éléments en ligne.

1 votes

Wiki sur les éléments html fr.wikipedia.org/wiki/HTML_element

3voto

JMJ Points 29

Je sais que cette question est ancienne, mais pourquoi ne pas utiliser tous les DIVs au lieu des SPANs ? Ainsi, tout s'harmonise parfaitement.

Exemple :

<div> 
   <div> content1(divs,p, spans, etc) </div> 
   <div> content2(divs,p, spans, etc) </div> 
   <div> content3(divs,p, spans, etc) </div> 
</div> 
<div> 
   <div> content4(divs,p, spans, etc) </div> 
   <div> content5(divs,p, spans, etc) </div> 
   <div> content6(divs,p, spans, etc) </div> 
</div>

1 votes

Je pense que l'objectif est de faire en sorte que tout soit aussi simple et sémantique que possible. Ainsi, si vous avez un en-tête et que vous voulez une div d'habillage interne, il peut sembler plus sémantique d'avoir : header {} et header span {} que d'avoir header {} et .inner {}. Cependant... si vous utilisez le .inner, vous pouvez l'utiliser plusieurs fois - les spans devraient très probablement être stylisés indépendamment. En résumé, il faut utiliser le moins de balises possible, c'est pourquoi les gens essaient de trouver des moyens d'éviter les div>div>div>div>div>div, etc.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X