-2

I have seen this question many times but the answers never seem to work. I have a floating image next to my "h1" title and i can't remove the space between the items and the edge of the page. I solved the problem for the left hand side by setting the body margin to 0 but the top still has this gap.

Descriptif image

#Logo
    {
        float: left;
        border-right: solid;
        border-bottom: solid;
    }

    #Title
    {
        font-size: 70px;
        border-top: solid;
    }

    header
    {
        margin: 0;
    }

    body, html {
        margin: 0;
        padding: 0;
    }
<!DOCTYPE html>
 <html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css"      href="Site_Web_1.css">
    <title></title>
</head>

<body>
    <header>
        <div id="Logo"><img src="images/Logo.png"></div>
    
        <h1 id="Title">Evil Mouse Coding</h1>
    </header>
</body>

</html>
GucciBananaKing99
  • 1,473
  • 1
  • 11
  • 31
Calum
  • 3
  • 2
  • 2
    Does this answer your question? [How to disable margin-collapsing?](https://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing) – CBroe Aug 25 '21 at 08:16
  • This is called collapsing margins, the margin-top of the h1 (from the user agent stylesheet) is moving the whole header element down. – CBroe Aug 25 '21 at 08:17

1 Answers1

0

Use margin-top: 0 in h1 css

#Title
    {
        font-size: 70px;
        border-top: solid;
        margin-top: 0;
    }
Martin
  • 22,212
  • 11
  • 70
  • 132
Vishal_VE
  • 1,852
  • 1
  • 6
  • 9