CODEWITHSUNDEEP
javascripthtmlcssformatting
Logan Cavanah
Logan Cavanah

Reputation: 1

Unexpected whitespace element inserted in HTML

I have a page with a bunch of images, each with auto-generated hyperlinks to their own personal image page; when you click an image, it takes you to a page to view the image on its own. The issue I have is that, when generating the image-viewing page, my uppermost body element doesn't touch the top of the screen because there is unexpected white space, which is detectable in the inspect-element screen.

enter image description here

I have reformatted the page multiple times but the white space still remains. I am unsure whether this is an issue with the fact that I am rendering the pages using python/flask and passing in the variables as such.

    <!DOCTYPE html>
    <html>
    <head>
    ​
        <title>Image {{imageNumber}}</title>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/styleSheet.css') }}">
    ​
    </head>
    
    <body>
        <h1 class="titleText">Thermal Imaging</h1>
        <a href="/static/images/{{imageNumber}}.jpg" download>
            <img class="bigImg" src="/static/images/{{imageNumber}}.jpg">
        </a>
    </body>
    </html>

I expect the white space that appears to not be there. No error messages appear, but in the inspector I can see (and temporarily delete) the white space causing the issue: it is labelled as &#8203

Upvotes: 0

Views: 821

Answers (2)

Logan Cavanah
Logan Cavanah

Reputation: 1

Ok, the solution was, for me, as follows: I fiddled around with the HTML, reformatting it and deleting blank spaces. I must have, at some point, deleted the zero-width-space character and now it works as intended. I recommend, if you have a similar issue, trying to delete, copy, paste, reformat etc your html until it works.

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65806

Browsers have built-in stylesheets that apply a default margin and/or padding to the body. Additionally, an h1 element has built-in margins as well. You adjust/remove these with CSS rules.

Here's an example that removes the top margin from the body and the first h1 element, allowing the first item in the body to be placed at the extreme top of the page:

body, .noTopMargin { margin-top:0; }
<h1 class="noTopMargin">I have no top margin</h1>
<h1>I have a top margin</h1>

Upvotes: 1

Related Questions