How can I make a div not larger than its contents?

HTML Web Development Front End Technology

To make a div not larger than its contents, use the display property with the value inline-block. We have a div here with an image −

<div class="wrapper">
   <img src="https://www.tutorialspoint.com/python3/images/python-mini-logo.jpg"
   width="300" alt="Python">
</div>

The div is styled with inline-block. This inline-block would form a div not larger than its contents −

.wrapper{
   display: inline-block;
   border: 10px solid orange;
}

The image is given a border −

img{
   border: 20px solid white;
}

Example

Let us now see the complete example −


<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example</title>
   <style>
      .wrapper{
         display: inline-block;
         border: 10px solid orange;
      }
      img{
         border: 20px solid white;
      }
   </style>
</head>
<body>
   <h1>Python Course</h1>
   <div class="wrapper">
      <img src="https://www.tutorialspoint.com/python3/images/python-mini-logo.jpg"
      width="300" alt="Python">
   </div>
</body>
</html>

Output

If we won’t add the display inline-block above, the following will be visible i.e. div larger than content −

AmitDiwan

Updated on: 01-Nov-2022

60 Views

Kickstart Your Career

Get certified by completing the course

Get Started