.tag-area {
width: 300px;
height: 200px;
border: 1px solid;
}
.tag-area a.tag-item {
min-width: 60px;
padding: 3px 6px;
border-radius: 3px;
background-color: rgb(42, 154, 191);
color: #fff;
font-weight: bold;
text-decoration: none;
font-size: 16px;
white-space: nowrap;
margin-top: 10px;
}
.tag-area a.tag-item span {
margin-left: 3px;
color: #eee;
}
.tag-area a.tag-item:hover {
color: #eee;
}
<div class="tag-area">
<a class="tag-item" href="/tags/30/">o11 <span>×3</span></a>
<a class="tag-item" href="/tags/3/">rest <span>×3</span></a>
<a class="tag-item" href="/tags/9/">foot <span>×1</span></a>
<a class="tag-item" href="/tags/12/">decide <span>×1</span></a>
<a class="tag-item" href="/tags/14/">whether <span>×1</span></a>
<a class="tag-item" href="/tags/15/">possible <span>×1</span></a>
</div>
I am trying to add a little gap above the last two tags, but why margin-top
property on tag does not work?