Unerwartete "Leerzeichen" mit Rahmen

Question

Wenn ich eine 1px border zu einem div hinzufügen, erscheint ein unerwarteter Abstand zwischen dem Rahmen und dem Inhalt innerhalb der div.

Mit der Grenze: image

<div class="reporting square" style="border: 0.5px solid red; padding: 0px;"> 
    <p>Hi</p> 
</div> 

Ohne die Grenze: image

<div class="reporting square" style="padding: 0px;"> 
    <p>Hi</p> 
</div> 

Answer 1

können Sie auf Css Reset

oder zu verwendet pmargin:0;

p{margin:0;}

<div class="reporting square" style="border: 0.5px solid red; padding: 0px;"> 
 
<p>Hi</p> 
 
</div>

Used to css Reset