0

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

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
Logan Cavanah
  • 1
  • 1

2 Answers2

1

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>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • Thanks, though this doesn't work for me. I should have linked my CSS, but I basically already have a bunch of formatting settings (for example, margin-top: 0) however this does not fix the issue. The unexpected element is still being inserted above my

    regardless of changing formatting.

     – Logan Cavanah Jul 24 '19 at 15:21
  • @LoganCavanah You say that the white space is detectable through inspection in the dev. tools. What do the dev. tools show as being there? Can you update your question with a screen shot of that inspection? – Scott Marcus Jul 24 '19 at 15:24
  • @LoganCavanah Ok, [this](https://stackoverflow.com/questions/2973698/whats-html-character-code-8203) may be of some help. – Scott Marcus Jul 24 '19 at 16:26
0

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.

Logan Cavanah
  • 1
  • 1