Boxes that fit text in CSS

So how would I make boxes that fit perfectly around the text in them?
This is the link to my project:

You can use fit-content.

.myelement {
  height: fit-content;
  width: fit-content;
  padding: 1vmin;

All it does is make the element scale to fit its content. It’s a handy little value.

If this worked, please mark this post as the solution =)

So it half worked, it fit the text but also stopped text-align working, is there a way around this?

Try setting margin-right and margin-left to auto.

This is the full code:

.myelement {
  margin-right: auto;
  margin-left: auto;
  height: fit-content;
  width: fit-content;
  padding: 2vmin;

I added extra padding lol. You can see the demo here:


Works perfectly, Thanks!

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.