Categories
CSS

How to make a div not larger than its contents with CSS?

Spread the love

Sometimes, we want to make a div not larger than its contents with CSS.

In this article, we’ll look at how to make a div not larger than its contents with CSS.

How to make a div not larger than its contents with CSS?

To make a div not larger than its contents with CSS, we make it display as an inline-block element.

For instance, we write

<div>
  <div class="yourdiv">content</div>
</div>

to add nested divs.

Then we write

.yourdiv {
  display: inline;
}

to make the inner div an inline-block element with display: inline;.

Conclusion

To make a div not larger than its contents with CSS, we make it display as an inline-block element.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *