Pourquoi les balises html: p> CSS: p> code> se chevauchent et comment prévenir cela? J'ai besoin d'eux pour envelopper bien l'écran de manière jolie afin qu'ils n'obtiennent pas les vues des autres. .alphas {
border-radius: 5px;
border: 12px solid #8AC007;
padding: 20px;
background-color: #006677;
width: 200px;
height: 150px;
}
3 Réponses :
p> span code> Les éléments sont en ligne par défaut. Afin de les faire générer des boîtes, vous devez utiliser inline-block code>:
<span class="alphas">#</span>
<span class="alphas">A</span>
<span class="alphas">B</span>
<span class="alphas">C</span>
<span class="alphas">D</span>
<span class="alphas">E</span>
<span class="alphas">F</span>
<span class="alphas">G</span>
<span class="alphas">H</span>
<span class="alphas">I</span>
<span class="alphas">J</span>
<span class="alphas">K</span>
<span class="alphas">L</span>
<span class="alphas">M</span>
<span class="alphas">N</span>
<span class="alphas">O</span>
<span class="alphas">P</span>
<span class="alphas">Q</span>
<span class="alphas">R</span>
<span class="alphas">S</span>
<span class="alphas">T</span>
<span class="alphas">U</span>
<span class="alphas">V</span>
<span class="alphas">W</span>
<span class="alphas">X</span>
<span class="alphas">Y</span>
<span class="alphas">Z</span>
Démo mise à jour une dernière chose - navigateur rend également l'espace blanc sur des éléments de niveau inline *, suivez Cet article pour plus d'informations. La balise est en ligne par défaut, largeur et hauteur ne s'applique pas. Vous pouvez le définir comme un bloc inline, lire Cet article pour en savoir plus sur le différences entre eux.
voir ici: http://jsfiddle.net/uyg0zdlf/1/ span Les balises sont en défaut sur une propriété d'affichage en ligne. Vous ressemblez à ce que vous voulez, c'est plus dans les lignes de l'inline-bloc. Définissez-le comme ceci:
.alphas {affichage: en ligne-block; }
Affichage: Inline-Block;