CSS Sizing Items
Last Updated: April 3, 2022
Every element in DOM has a size and you can define them using CSS.
The natural or intrinsic size of elements
When you place an image on an HTML document without specifying the width and height of the image, the Image itself is visible on a document with a certain height and with. This size is called natural or intrinsic size.
Natural Image
<div style="border:1px solid #ccc">
<img src="arrow.png">
</div>

Specify the size
You can specify the size of the elements by setting the width and size
<style>
.image{
width: 75px;
height:75px;
padding:10px 10px;
}
</style>

When your content has not got enough space to fit your parent element, overflow can happen.
Using percentage
Use the percentage for width and height of the parent’s div
.child{
width: 50%;
padding:10px 10px;
border:2px solid orange;
}
Child Box with 75%
min- and max- sizes
Define the minimum and maximum size of the elements
max-width: 150px;
Child Box with max-width:150px
max-height: 150px
Child Box with max-width:150px and max-height:150px. Over flow can happen if space is not required to grow
Image display with max-width:100%
<style>
.box1{
width:300px;
border:1px solid orange;
padding:8px 8px;
}
.box2{
width:200px;
border:1px solid orange;
padding:8px 8px;
}
.box3{
width:100px;
border:1px solid orange;
padding:8px 8px;
}
</style>
<div style="border:1px solid #ccc;padding:10px 10px;margin-bottom:25px;display:flex;">
<div class="box1">
<img style="width:100%" src="img/arrow.png">
</div>
<div class="box2">
<img style="width:100%" src="img/arrow.png">
</div>
<div class="box3">
<img style="width:100%" src="img/arrow.png">
</div>
</div>


