Search code examples
htmlbootstrap-4markdownhexo

Line breaks appearing on page that aren't in HTML source

Line breaks are appearing when the DOM is rendered that aren't in my source code, push the content out of place. Why? And how can I fix that? Here is my code:

<div class="float-left" style="position:relative;left:15px">
    <h2 style="color:#323C41;margin-bottom:0;">A New Hope</h2>
    <p style="color:#323C41;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula nisl at hendrerit ornare. Ut non ipsum urna. Praesent non.</p>
</div>

When I inspect the page in Chrome, it shows this:

<div class="d-flex justify-content-center align-items-center bg-grey-kr fg-navy-kr secondary">
    <br>
    <img src="/images/testers/rebels.png" alt="Rebel symbol" class="rebel"><br>    <div class="float-left" style="position:relative;left:15px">
    <br>        
    <h2 style="color:#323C41;margin-bottom:0;">A New Hope</h2>
    <br>        
    <p style="color:#323C41;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula nisl at hendrerit ornare. Ut non ipsum urna. Praesent non.</p>
    <br>    
</div>

This causes my page to look like this:enter image description here

When I delete the line breaks, I see the expected result: enter image description here

Thanks for checking this out. I searched all morning and couldn't find an answer. Sorry ahead of time if it is obvious!

Solution

  • The issue was coming from adding HTML code directly into my "new page" from the Hexo tool. Hexo is a blogging tool that compiles Markdown files into a static, live page. Whenever I was hitting enter to write code on a new line, Markdown took that as if I were hitting enter on a text editor. Moving the code all to one line fixed the issue.

    Couldn't find the answer online, but when I figured it out I wanted to post it here for visibility.