CODEWITHSUNDEEP
css
Steve
Steve

Reputation: 1765

What is causing the space between inline block elements?

On this page, when you hover over a navigation item, there is a gap to the left of it:

enter image description here

Can you help me to remove this gap please?

Upvotes: 0

Views: 1252

Answers (2)

XYZ
XYZ

Reputation: 27387

To solve your issue. Try to float all the li elements inside ul which remove the magical margin between each li. (screenshot below is the aftereffect)

enter image description here

The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear).

To Solve This Issue in General

  1. Remove the spaces
  2. Use negative margin
  3. Skip closing tag (Hack)
  4. Set font-size to 0
  5. Use float
  6. Use flexbox

Read more about the magical space for inline items,

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Upvotes: 3

Hidayt Rahman
Hidayt Rahman

Reputation: 2678

use display:block instead of display:inline-block then add float:left for inline elements

display:inline-block add extra spaces in px when you write code in beauty mode with spaces and line's

something like this:

.genesis-nav-menu .menu-item {
    display: block;
    margin-bottom: 0;
    padding-bottom: 0;
    text-align: left;
    float: left;
}

Upvotes: 2

Related Questions