Random white space between two elements? HTML/CSS

HTML-CSS
#1

In my attached screenshot of my codepen page for my personal portfolio, I have highlighted an area of random white space.

image.png2506×710 77.5 KB

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" :slight_smile:).

Thanks!

#2

Could you link that project here? Just so it’s easier to figure out what’s happening.

#3

First, the header moving down is correct behavior. Its the way margins collapse. The h1 top margin protrudes out from the top of the parent.
Now, there’s a number of ways to get what you want. The position: relative suggestion above will work if you want to get into absolute positioning of the h1, but it’s not needed here. One way is to give the header div either a top padding or top border (of any amount but 1px will work). This gives the h1’s margin something to ‘push’ against. Another way is to set overflow: hidden; on the header div. What this does is change it’s Block Formatting Context and the margins will react in a different manner.

TEST: http://codepen.io/benjaminvanzwienen/pen/OpyrXe

#4

Sure: http://codepen.io/Will5592/pen/eByVYG

#5

Ben - unfortunately I don’t quite understand what you mean, I think partly as your answer is in relation to another post (I know it’s probably applicable here).

My h3 element is contained in a div element, and so the margin should push the h3 down from the top of the div? Unless I’ve understood it wrong. I can’t understand why there is a white gap between the the div with the h3 in it and the div with the picture and title with my name in.

Weirdly, adding a border to the orange div negates the issue…?

1 Like
#6
#7

Thanks again for your reply, I’ve had a read and whilst I understand the concept of collapsing margins now (new thing learned!) I don’t understand how it’s applicable here.

Mainly because neither the elements or the divs have any margins, so they shouldn’t be overlapping/collapsing.

#8

Your h4 has a margin-top: 75px. And since the parent div doesn’t have a border or padding, h4 doesn’t have something to push against inside of the parent. So the margin overlaps the parent div and creates white space between the two divs.

#9

Sorry yes you’re right, it has a top margin.

So the edge of a Div doesn’t act as something the internal elements can push against? How strange, I guess I’ll have to add a tiny padding/border then to give it something to work with.

I thought divs had physical edges to them even if you hadn’t specified a border etc.

Cheers for your help, I’ll make the changes this evening.

1 Like
#10

Nope. But since you usually have no margin on the first child element (at least I didn’t encounter this problem very often), this seems like a bug or something, while it is default behaviour. And if you use margin on the second child (or any child afterwards) it will just push against the first child element.

#11

I’ve just added a padding-top: 1px to the orange div and it’s solved the problem and has virtually no effect on anything else :blush:

Thanks very much!

1 Like
#12

This is exactly the issue I had with one of my projects and oddly also, it fixes when I attach a border to body.