How can I stop these inline elements overflowing the div? - html

Question

I have a div with a solid border. Within this div are multiple 'tags', which should all be contained within the border of the div. I've used the following code to do this:
.sidebox {
border-style: solid;
width: 250px;
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
}
#tag {
background-color: black;
color: white;
display: inline;
padding: 5px;
margin: 3px;
text-decoration: none;
}
<div class="sidebox">
<h2>Popular Tags</h2>
Tag 1Tag 2Tag 3Tag 4Tag 5Tag 6Tag 7Tag 8
</div>
The problem is that these tags overflow the div. There are displayed as one long line of tags. How can I make tags go down to the next line within the div, rather than overflow it?
I've tried using overflow: none; but this causes them all to overlap each other.

Answer 1

Display them as inline-block instead of inline.
Also, you should use a class instead of ID for each tag. You have to use ID when the elements are unique. You have to use a class when you want to use a property in more than one element.
.sidebox{
border-style: solid;
width: 250px;
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
}
.tag {
background-color: black;
color: white;
display: inline-block;
padding: 5px;
margin: 3px;
text-decoration: none;
}
<div class="sidebox">
<h2>Popular Tags</h2>
Tag 1Tag 2Tag 3Tag 4Tag 5Tag 6Tag 7Tag 8
</div>