![Trending Articles on Technical and Non Technical topics](/images/trending_categories.jpeg)
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How can I make a div not larger than its contents?
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
![](https://www.tutorialspoint.com/assets/questions/media/123055-1666257458.png)
If we won’t add the display inline-block above, the following will be visible i.e. div larger than content −
![](https://www.tutorialspoint.com/assets/questions/media/123055-1666257480.png)
Advertisements