Atom Adds Whitespace on Line Breaks

, ,
1

If I write my Nav like this:

[code]

WORK TOOLS ABOUT CONTACT [/code] There is a blank space after each link which looks bad if I change the background color on hover.

However if I write it like this (which is harder to read):

[code]

WORKTOOLSABOUTCONTACT [/code] That space is no longer there.

I am using Atom as my editor. Has anybody had a problem with this or know a fix?

Below is the CSS and and a screenshot with the blank space selected.
nav {height: 55px;
float: right;
a {
display: inline-block;
height: 100%;
border-left: 2px solid $gray;
padding: 14px 25px;
font-weight: 500;
color: $gray;
text-decoration:none;
}
}

Screen Shot 2017-06-05 at 3.47.28 PM.png1098×208 215 KB

2

That’s actually not Atom… that’s just the way that HTML inline-block elements work. If there’s a gap between the closing tag of one element, and the opening tag of the next, that translates to a space between the elements.

You can fix the problem the way you did - by squishing the closing and opening tags together - or you can use comments, like this:

    <nav>
         <a href="#">WORK</a><!---
     ---><a href="#">TOOLS</a><!---
     ---><a href="#">ABOUT</a><!---
     ---><a href="#">CONTACT</a>
    </nav>
1 Like
3

Thanks for the info on inline-block, I had no idea.

I changed the display from inline-block to block and floated the links to the left and this removed the space while the code is still easy to read.