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 video 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.