Page has an empty space on top css năm 2024

Question

Everytime that i use a h1 in a header, i suddenly get some space above the whole section. I do think that is margin, but even with h1 {margin:0) the space remains.

Nội dung chính Show

How do I remove header space in CSS?
How do I get rid of extra whitespace in CSS?
How to remove header margin in HTML?

I found out, diggin online, that if i target the first child of the h1 and put his margin-top to 0, the space simply disappears. I'm really happy about it, but i still need to understand how does it work.

Ah: even if i target the first-child, i usually don't have one in the markup. So this is even more strange. I have an effect targeting an element that does not exist in my html.

8 Answers

eck November 11, 2014 1:43pm

Try adding this CSS and let me know if your problem remains:

body { padding: 0; margin: 0; }

eck November 9, 2014 3:03pm

If a parent element does not have any top padding or less top margin then its first child, then elements are rendered in a way that makes the parent element appear to have the child element's margin. So this can happen anywhere on a page where this conditions are met, but it tends to be most obvious at the top of a page. I hope that made sense >.<

So the solution is to avoid a top margin for that first child element or to give the parent top padding (overflow: hidden can also get a decent result, but I think the other options are better)

As for the why of it, check out this article.

Hope that helps!!!

eck November 10, 2014 1:46pm

Don't target :first-child, just remove the top margin for your h1 and see if that helps.

If that doesn't work or make sense to you, post your HTML. I can give you more educated suggestions on specifically how you might fix this problem.

Shaun Kelly November 10, 2014 1:48pm

html, body { margin: 0 auto; }

Thanks for the reply Erik. Ok, i experimented a little bit more and now i do understand why i was having that problem with first-child; nonetheless i still can't get rid of the white space above my header. Here's my code.

Stylesheet:

header {background: black; color: white; margin: 0; padding: 0; display: fixed}

h1{ margin: 0; padding: 0; }

html

<!doctype html> <html lang=en>

<head>
    <meta charset="utf-8"  />
    <link rel="stylesheet" type="text/css" href="main.css"  />
    <title> Esempio </title>
</head>
<body>
    <header>
        <h1> Stuff </h1>
        <ul>
            <li>One</li>
            <li>Two</li>
        </ul>
    </header>

<body>

<html>

```

I solved this with adding

h3 { margin: 0; padding: 0; }

seal-mask

You are having this problem because of collapsing margins. You would need to set your margins to 0 on both the header and your H1.

How do I remove header space in CSS?

Set the margin and padding of the header element to 0:.

header {.

margin: 0;.

padding: 0;.

How do I get rid of extra whitespace in CSS?

To remove the space between lines, you need to modify the CSS styles for the element that contains the lines. You can do this by setting the line-height property to a lower value than the default. You can adjust the value as needed to get the spacing you want.

How to remove header margin in HTML?

You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .

mẹo hay Top List Top