Question

I am currently using this as a <span> to style text.

.tag {
    background-color:rgba(0,0,0,0.6);
    font-weight: bold;
    padding: 5px;
}

However, when I add a few below it all the borders touch each other. As it’s a <span>, I can’t expect them to be able to move, but if I use a <div> or style the original <p> that the text is in, the background extends to the whole line.

Is the a way of getting the best of both worlds here?

EDIT

Following the display: inline suggestion, my code is now:

.tag {
    background-color:rgba(0,0,0,0.6);
    font-weight: bold;
    padding: 5px;
    margin-top: 10px;
    display: inline;
}

You can see how it displays on the right of this page.

Answer 1

display:block and display:inline are different … DIVs by default are block … spans are inline. You can, however, change the default behaviour by using the display: attribute