Why <div> tag is behaving deferent with and without border??

Question

The question may be look you not defined properly, but I request you to take a look and answer if you can.

I have added <p> under <div> and defined the background color for <div> gray.

But when i don't add border for div, the background-color is applied only for <p> and when I add border for <div>, the padding is also added around <p>.

So my question is why <div> tag is not adding padding around <p> when I don't mention border for <div>.
If it is default behaviour of <div>, then why <div> is adding padding around <p> when I mention border for <div>, it should directory apply border without adding padding.

Please help me figure out it, so when building big things, i can write code with clear mind. Thanks😊

I have added 2 codes in which, first one is with border and another one without.

https://code.sololearn.com/Wf0Ecw0kOZiN/?ref=app

https://code.sololearn.com/WfkEFlHAlWbl/?ref=app

Answer 1

Hello Himanshu Rai. First, thanks for the clear explanation of your question. This kind of well described question is rarely found :))

However, to remove this kind of behaviour, you should add these lines of css :

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

Then according to your need, later you can give margin and padding in the elements :))

Answer 2

Got it😊! Thanks for helping me bro:)