为什么锚标记占用更多空间

Question

我正在研究React.JS项目，在那儿，我正在使用bootstrap框架进行设计。我正在使用Navbar，因为在将Home，Features，Pricing放置在锚标签旁边之后，我在Anchor标签中放置了一张图片，但是问题是锚标签占用了额外的空间。我该如何调试呢？

这是Navbar.js

import React, { Component } from 'react';
import './Navbar.css'
class Nav extends Component {
  render() {
    return (
      <div className='container-fluid'>
        <div className='row'>
          <div className='col-6'>
            <nav class="navbar navbar-expand-lg navbar-light">
              <a class='anchorproperties' href='www.facebook.com'>
                <img class='imageproperties' src='assets/images/logo.png' alt='logo'></img>
              </a>
              <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
              </button>
              <div className="collapse navbar-collapse" id="navbarNav">
                <ul className="navbar-nav">
                  <li className="nav-item active">
                    <a className="nav-link" href="www.facebook.com">Home</a>
                  </li>
                  <li className="nav-item">
                    <a className="nav-link" href="www.facebook.com">Features</a>
                  </li>
                  <li className="nav-item">
                    <a className="nav-link" href="www.facebook.com">Pricing</a>
                  </li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </div>
    )
  }
}

export default Nav

这是Navbar.css

/* anchor tag css starts here */
.anchorproperties {
    display: inline-block !important;
}
/* anchor tag css ends here */

/* logo css starts here */
.imageproperties {
    width:25%;
    margin-top: -1%;
}
/* logo css ends here */

我的预期输出是锚标签，不要占用任何多余的空间。