How to Make an HTML <div> Element not Larger Than its Content

In his tutorial, we will show you how to make the size of the <div> element not larger than its content. If the size of the content changes, the size of the <div> will change as well.

It is quite easy if you follow the steps described below.

Let’s see an example and try to discuss each part of the code together.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Use a <div> element with the class "box".
  • Place the <h2> tag in the <div> and write some content in it.
<body>
  <div class="box">
    <h2>Welcome to W3docs!</h2>
  </div>
</body>

Add CSS

  • Choose colors for your text and background using the background-color and color properties.
  • Add the display property to specify the type of the box used for an HTML element. The display property has many values. We use the "inline-block" value.
  • Use the padding property which creates space around the element's content.
.box {
  background-color: #54bbff;
  color: white;
  display: inline-block;
  padding: 10px;
}

Here is the result of our code.

Example of making a <div> not larger than its content using the display property with the "inline-block" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the documnet</title>
    <style>
      .box {
        background-color: #54bbff;
        color: white;
        display: inline-block;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h2>Welcome to W3docs!</h2>
    </div>
  </body>
</html>

Result

Welcome to W3docs!

Let’s see another example.

Example of making a <div> not larger than its content using the height and width properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        background-color: #54bbff;
        color: white;
        width: fit-content;
        height: fit-content;
        padding: 7px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h2>Welcome to W3docs!</h2>
    </div>
  </body>
</html>

In the example above, we set the width and height properties to the "fit-content" value.

Example of making a <div> not larger than its content using the display property with the "inline-flex" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        display: inline-flex;
        background-color: #8ebf42;
        color: white;
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h2>Welcome to W3docs!</h2>
    </div>
  </body>
</html>

In this example, we use the display property with the "inline-flex" value which displays an element as an inline-level flex container.