MOVE part 1 issue with top margin


#1

Hello, I get a strange "bug" when I add text to the first part of the MOVE project (html/css).

When I only install the picture under the div with a class of "main" in the css everything looks fine,

But as soon as I add the h1, paragraph and the button to the "container div" within the main div I get a nasty margin at the top over the background image, and it is impossible to remove... if I assign a dashed boarder to every element using the universal selector (*) the issue disappears and everything looks fine(except for the dashed lines). When I remove the dashed lines by removing the universal selector, the error is back.

How do I remove the border over the image? this did not happen in the previous projects.


#2

I randomly solved it by trying to add "overflow:hidden;" on the .main div-class in the css file and it solved the problem with the whitespace on the top of the image.


#3

understanding what you are dealing with is a good idea, you are dealing with collapsing margin, border and overflow are ways to counter this problem, along with padding


#4

Nice link, thanks! The actual problem was that I didnt even know the document was in float, would be nice to have that knowledge before starting a semi-finished project like the ones I am working on.


#5

True, the drawback of starting in the middle of a project, you need to figure out what is going on