Why does it change the position of the div block in the page after applying padding dimensions, when padding is the distance between inside content and the border of the div?


Does the div shift in position, or just expanding? Well, that is the thing with padding, it is the space between inside content and border, which means this spaces is added, expanding the box. the box-sizing property controls this, you can also set: box-sizing: border-box to prevent padding from expanding the box


if there is no content even after applying padding it should not change the size , as content is not present.But the box is expanding.
Is there any other property which only decides the space between content and border?


Did you try margin ?


But an empty box still has content (empty space). Doesn't matter if something is in the box or not. A real life box in which you store stuff in, is still a box, even if it empty.

No, there is no other property, but you can box-sizing: border-box to make padding and border part of the width of an element


margin is not spacing between the border and the inside of a box, you could make two boxes, and then give the inner box margin, but that is bit inefficient.


Sorry I misunderstood question..