Element stick outside of my div , help

HTML-CSS
1

here’s my code :
https://codepen.io/Abdou_dz_23/pen/MMNVNQ

the problem :

<div>
   <a>
        <img/>
        <p> </p>
   </a>
</div>

i have basically the same structure in the codepen , and my image tends to stick outside my div , my <p> element as well , i want the image to resise to take only 75% of the div’s height
and the rest 25% is for the <p> element .

How can i achieve this ? and if possible explain why my code did not work as i intended ?

2

Hi! I just set the margin of all elements to 0px by typing * {margin: 0px;} in the CSS code and that solved the problem. Webbrowsers already have defined values for margins and paddings and that can sometimes mess some things up.

I hope I could help you :).

3

@yuenther is correct here, Browsers do have some predefined styling for various elements, as for your case, p tag has a default margin-bottom of 1rem, so set it to zero and your problem will be solved.