How to remove thin space between header, main and footer?

HTML/CSS
1

its just only in mobile mode, i don’t know to remove this, purple line is from background.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layout</title>
    <style>
        body {
            background-color: blueviolet;
        }
        header, main, footer {
            background-color: #fff;
        }
        h1,h2,p {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>this is header</h1>
    </header>
    <main>
        <h2>this is main</h2>
    </main>
    <footer>
        <p>this is footer</p>
    </footer>
</body>

Screen Shot 2023-05-14 at 11.37.31
Screen Shot 2023-05-14 at 11.37.31938×1306 32 KB

2

Hi

Try border: none; in your header/main/footer.

Regards.

3

Hi,

i have tried it and still not working.

4

You need to use the dev tools to investigate where those borders come from.
For instance in here

image
In the panel that would open you can check the size of margin borders padding and content

image

Investigating the parent elements may help too.

1 Like
5

I’ve been using it, and someone suggested a border-top of -1px, and it works, but I tried to deploy it to netlify with the normal settings of margin 0 and padding 0, and I opened it on my phone and the result is that the line is not there, it seems to be only in the browser but the real implementation is still good. thanks for your advice.

6

Device mode is like an emulator. It is good enough to give you a close approximation. Google defines it in their documentation as a “first-order approximation”.

1 Like