CSS: Why left border is taking extra space?

Question

Here is my website: http://www.reshapefinancial.com/ and when I apply left border it creates a space on right site. When you inspect and remove the left border border-left: 1px solid white you'll see that the space on the right disappears.

Answer 1

Please add the related code to your question

The reason there's a gap there is because the lis are set as display: inline-block. This means the browser treats them like words, and like words when there's a space between them the browser will render it. In your case the space comes from the newline and spaces used for indenting in the html.

Solution 1 (kinda hacky)

One solution which addresses this problem directly would be to add a:

#top-menu{
    ...
    font-size: 0;
}

this essentially makes the space the browser is putting there have no font size which disappears it. Not perfect, but it addresses the problem directly. As @Kudla69 pointed out in his answer this does ruin font-size inheritance which can cause issues as well, which is what makes this particular hack not the recommended route.

Solution 2 Recommended

Another way to address this directly is to remove the space in the HTML. Restructuring the HTML to read more like.

<li> This is something
</li><li> This is something else
</li>

This removes the space between the elements and the browser will essentially treat them like words without a space between them and butts them right up against one another.

Solution 3

Finally, if you're fine with it, you can also float: left the li elements. This may cause sizing issues in some cases though. This removes them from the flow so the browser doesn't treat them like words anymore.

Or as others have said use display: flex which again can act a bit differently than inline-block at times but is a more modern approach.

Answer 2

@Dons answer explains the underlying issue well. Here's an alternate solution by making the ul a flexbox. This method is better imo since you don't have to hackily set the font size to 0 which will mess up any font size inheritance.

#top-menu.nav {
 display: flex;
}

Answer 3

Please Checkout Following URL to Get a Solution For White Spacing

display: inline-block leaves gap with respect to height after div element and Here is your Solution

Add float:left at li

#top-menu li {
display: inline-block;
float: left;
font-size: 14px;
padding-right: 22px;
}

Answer 4

In the comments to the OP, @Marvin pointed out the root cause of the problem (and linked to the topic where it's already answered): it's because of whitespace characters between inline-block items. Inline-block elements belong to inline formatting context, just like e.g. words of the text, and any whitespace characters between them act as a whitespace characters in the text, i.e. as inter-word spacing. It's not a bug. It's how display:inline-block is supposed to work by the standard.

Setting the border doesn't cause that spacing, it just makes it visible.

There are tons of ways to work around this. Just to mention some of them:

• Negative margin-left. Downsides: you need to know the exact width of a whitespace character, and it depends on the font settings etc.
• Negative word-spacing or letter-spacing (or even both, as in old YUI solution). Downsides: same as above + browsers treat negative spacings differently, some allow items to overlap, some don't.
• Remove the space between the previous item's end tag and the next item's start tag. Downsides: needs control over markup, not always compatible with template engines, worsens the readability of the code.
• Comment out the space between these tags with HTML comments (<!-- -->). Downsides: same as above, redundant DOM nodes for these comments.
• font-size: 0; for the container. Downsides: you can't set the font size of the items in em units anymore, works buggy in old Android browsers.
• Omit the </li> end tags. It's valid in HTML5 (and was always valid in HTML, but not in XHTML), and doing so makes the browser close them implicitly right before the next <li> start tag, leaving no whitespace between them. Downsides: works only for a limited set of tags, not always easy to read, may cause problems in code editors (e.g. broken syntax highlighting).
• Use the custom font for the container in which the space character has a zero width. Downsides: extra HTTP request for that font (or extra bytes if it's embedded), doesn't work in old/proxy browsers like Opera Mini.
• Use floats instead of inline-blocks. Downsides: effectively removes all the effects of inline-blocks (including their advantages like horizontal and vertical alignment options), needs "clearfixing" the container.
• Use display:table for the container and display:table-cell for items instead of inline-blocks. Downsides: can't wrap to the new line, items can't have different height, needs different approach to styling (e.g. border-spacing instead of margin to control the spacing if it's needed).

This list is way not complete. And none of these ways is perfect, as most of them are basically hacks.

However, I deeply believe that the best solution to any problem is using the proper tools that don't cause that problem. In this case, there is such tool: Flexbox. It has all the same alignment capabilities as inline-blocks (and more!), it needs no "clearfixing", it can wrap to new line if necessary, and it's currently supported in almost all browsers. And it doesn't leave any space between items by default.

In practice, you can just add display:flex to the container, and in modern browsers the unwanted spaces automagically go away. And your existing inline-block solution will still work in very old browsers, providing decent fallback.