In my attached screenshot of my codepen page for my personal portfolio, I have highlighted an area of random white space.
Is anyone able to explain to me the reason why it’s there, and how to get rid of it?
As you see from my HTML, I open a div with a style=“height:300px” and a class =“offwhite-background” (however for the purposes of the screenshot, I made the offwhite background an orange colour). I then open a H4 element, and close it, and then close my division. However at the top there is a weird space between the element above, but it does not happen between the orange div and the blue div below (that contains the words “My Sites”).
In my CSS, I’ve applied a margin of 75px at the top of the H4 element, which increases the white space (however if I have no CSS for H4, it still has a smaller white space). My understanding of margins was that the H4 element would be pushed down from the top of it’s enclosing element, the larger the margin is?
Anyone able to provide some insight into this would be awesome, I’m just starting out with coding so there’s a ton I don’t know.
Also, I tried googling but found no luck (partly because googling “why is there a white gap between my elements” is vague/stupid" ).