Removing unnecessary margins and adjusting height using CSS

Question

There are two problems that I am trying to fix but cannot find a solution

The first is that the space between the fields li is much wider than 2px than it should be. How to remove it?

In other words, the margins of a are only tall, like text, although the height of the margin is defined as 50px.

I also have a normalize.css file that is included in GitHub.

Any suggestions?

HTML

<nav class="nav-box"> <div class="row"> <ul class="main-nav"> <li><a href="#">YES</a></li> <li><a href="#">NO</a></li> </ul> </div> </nav> 

CSS

 .row { max-width: 1140px; margin: 0 auto; } .nav-box { position: fixed; top: 0; left: 0; width: 100%; box-shadow: 0 2px 2px #f2f2f2; min-height: 65px; } .main-nav { float: right; margin-top: 7px; } .main-nav li { list-style: none; display: inline-block; font-size: 100%; } .main-nav li a { height: 50px; background-color: #ee4723; padding: 0 18px 0 18px; font-size: 1.4rem; color: #fff; font-family:'Oswald', sans-serif; border:solid #fff; border-width: 0 1px 1px 0; line-height: 54px; } 

Here's the fiddle .

Answer 1

For interval problem

This is a problem with inline-block elements (an additional interval appears between two such elements). One way to solve this is to provide the parent element (in this case <ul> ) of the font-size of 0 and then explicitly set the font-size element of the <li> element. There are other ways, like negative margin, but I believe that the font-size: 0 method is the most convenient. You can read about other methods here https://css-tricks.com/fighting-the-space-between-inline-block-elements/

For height problem

While you have assigned the <li> elements to the inline-block property, the child <a> elements are still inline-block . Attributes such as height and width will not affect inline elements. Add display: inline-block to the <a> element, as well as for the desired effect

Answer 2

You can use negative fields:

 .main-nav li { margin: 0 -2px; } .main-nav li a { display: inline-block; }