[Réglé] La propriété display bloc sur un div

Bonsoir,

j'aurais besoin d'une confirmation au sujet de la propriété display:block
pour moi elle ne sert a rien lorsqu'elle s'applique a un div puisque c'est une balise de type bloc et que donc on peut lui appliquer des dimensions.

donc le code :

.monstyle {display:block; height:10px width:15px;}
<div class="monstyle">test</div>

revient au même que

.monstyle {height:10px width:15px;}
<div class="monstyle">test</div>

sachant que le deuxième et juste, n'est ce pas?

c'est que j'ai trouver une code ressemblant au premier et j'ai pas compris :s
Modifié par eagle84 (30 Dec 2008 - 22:47)

Les deux codes sont valides (pour peu que le CSS soit bien dans une feuille de styles CSS et le HTML dans une page HTML). Quant à leur «justesse», c'est un concept pas très utile ici. Un code pourra être valide, efficace, approprié, mais «juste» c'est un peu vague.

Ensuite, oui les éléments DIV sont par défaut en display: block et il est donc inutile d'utiliser cette déclaration pour un DIV (même chose pour un P, H1, BLOCKQUOTE, et d'autres encore).

Par contre, on peut l'utiliser lorsqu'il s'agit de rétablir ce type d'affichage après l'avoir modifié (avec un display:none par exemple). L'utilisation de display:none/display:block tour à tour est plutôt classique lorsqu'on utilise du JavaScript pour afficher/masquer des éléments.

Bonjour eagle84

Oui a priori le le display:block; n'est pas utile pour div puisque c'est la valeur par défaut de la propriété pour cet élément.

L'exemple que tu donnes parait effectivement un peu étonnant tant il serait général.

Ce qui pourrait, éventuellement, très éventuellement, concernant un div, arriver serait ceci.

html:

<div id="tel_conteneur">

     <div>
     ...
     </div>

     <div>
     ...
     </div>

     <div class="monstyle">
     ...
     </div>

</div>

Avec css:

#tel_conteneur div {
display:inline; /* par exemple */
}

/* Et en plus */

#tel_conteneur div.monstyle {
display:block;
}

Et c'est bien ce qui rend ton exemple troublant:
aucun contexte n'est donné concernant le/les div concernés (le/les .monstyle).

Tout se passe comme si la déclaration de style à corriger était carrément:

div {
display:inline; /* toujours pour l'exemple */
}

Ce qui serait bien audacieux ma foi


Bref ne te prend pas trop la tête là dessus
Modifié par 4/3 (30 Dec 2008 - 19:49)

Ok merci bien pour vos réponses !