The easiest way to size things

If there are images you want to have the same dimensions, you can use an 'id' to quickly make them all the same size!

For example: here are two userboxes that are very different sizes:

Now if we use the code

<style>

#size{width: 200px; height: 40px}

</style>

we can give the images the id of size to make them the same size:

<img src="https://collection.ju.mp/assets/images/gallery23/d70d8bcf.jpg?v=0236594d" id="size">

<img src="https://collection.ju.mp/assets/images/gallery12/b7e7d7dd.png?v=0236594d"  id="size">

This makes them the exact same size.

It's usually the most aesthetically pleasing to just make all the heights match though as it prevents any weird stretching - and that would look like this:

<style>

#size2{height: 40px}

</style>

<img src="https://collection.ju.mp/assets/images/gallery23/d70d8bcf.jpg?v=0236594d" id="size2">

<img src="https://collection.ju.mp/assets/images/gallery12/b7e7d7dd.png?v=0236594d"  id="size2">

/Note: this only works when the id matches the code exactly - so if you used #size but used id="Size", it won't work./

This works for virtually any code, like borders filters etc.

EX)

<style>

#id{height: 40px; border: 3px solid red}

</style>

<img src="https://collection.ju.mp/assets/images/gallery23/d70d8bcf.jpg?v=0236594d" id="id">

<img src="https://collection.ju.mp/assets/images/gallery12/b7e7d7dd.png?v=0236594d"  id="id">