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>
Test