Q:

How to Make a DIV Not Larger than its Contents using CSS

mhmadesk
Save to bookmark
|
2022-05-17
|
  272 
Very Easy
0

How to Make a DIV Not Larger than its Contents using CSS

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the CSS display Property

You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).

The display: inline-block; force an element to generate a block box that's laid out as if it were an inline box. Let's try out the following example to see how this works:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Expand DIV as Wide as its Contents using CSS</title>
    <style>
        .wrapper{
            display: inline-block;       
            border: 25px solid black;
            margin: 20px;
        }
        img{
            border: 20px solid white;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <img src="/examples/images/sky.jpg" width="300" alt="Cloudy Sky">
    </div>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

HTML / CSS Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to Change the Color of an hr Element using CSS... >>
<< How to Change the Cursor into a Hand Pointer on Ho...