Revision Update:
To avoid the downward movement of your p tag, make sure to include margin: 0; in the style of the element. Below is a detailed explanation of why this issue occurs and how to resolve it.
The reason behind the displacement of your p tag lies in the concept of margin collapsing, particularly when margins fail to collapse upon the addition of a border.
For additional insights on margin collapsing and its functioning, you can refer to this useful resource. The page elaborates:
Margin collapsing combines the top and bottom margins of blocks into a unified margin with the greatest size among individual margins (or just one if they are equal). This phenomenon doesn't apply to floating or absolutely positioned elements.
In essence, the browser collapses your margins when a border is absent, whereas it computes them with a border set in place.
To prevent margin collapsing by browsers, explore solutions provided in this relevant discussion. Quoting from this conversation (initially referenced in another related query):
An alternative approach discovered at Child Elements with Margins within DIVs involves including:
.parent { overflow: auto; }
or:
.parent { overflow: hidden; }
These methods help in preventing margin collapse. Similarly, the inclusion of border and padding has similar effects. Therefore, another tactic to combat top-margin collapse is:
.parent {
padding-top: 1px;
margin-top: -1px;
}