How to prevent overlapping tags from overlapping with each other?
Why do tags <span>
overlap and how can I prevent this? I need them to wrap around the screen so they don't get in the way of others' views.
HTML:
<span class="alphas">#</span>
<span class="alphas">A</span>
<span class="alphas">B</span>
<span class="alphas">C</span>
<span class="alphas">D</span>
etc...
CSS
.alphas {
border-radius: 5px;
border: 12px solid #8AC007;
padding: 20px;
background-color: #006677;
width: 200px;
height: 150px;
}
See demo - http://jsfiddle.net/uyg0zdLf/
source to share
<span>
tag is inline level by default, width
and values are height
not applied. You can set it as an inline block, read this post to learn more about the differences between them.
.alphas {
display: inline-block;
}
One more thing - the browser also displays white space on inline * level elements, follow this post for more information.
source to share
span
are built-in. To force them to create fields, you must use inline-block
:
.alphas {
display: inline-block;
}
.alphas {
border-radius: 5px;
border: 12px solid #8AC007;
padding: 20px;
background-color: #006677;
width: 200px;
height: 150px;
display: inline-block;
}
<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>
source to share
span
have an inline display property by default. You say you want more along the inline-block lines. Install it like this:
.alphas { display: inline-block; }
See it here: http://jsfiddle.net/uyg0zdLf/1/
source to share