为什么锚标记占用额外的空白？

Question

我正在进行react项目，因为我有一个锚标签，然后有一个导航栏。问题是锚标记将导航栏推到右侧。因为锚标记占用了额外的空白。我什至尝试使用display: 'inline-block'，但它不起作用。

Navbar.js

import React, { Component } from 'react';
import './Navbar.css';
import { Link } from 'react-router-dom';

class Navbar extends Component {
    render() {
        return (
            <div className='container-fluid custom'>
                <div className='container'>
                    <div className='row'>
                        <div className='col-12'>
                            <nav className="navbar navbar-expand-lg navbar-light bg-light">
                                <a className="navbar-brand space" href="www.facebook.com">
                                    <div className='logo'>
                                        <img src='assets/images/kaboom.png' alt='logo'></img>
                                    </div>
                                </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">
                                            <Link className='nav-link' to='/'>Home</Link>
                                        </li>
                                        <li className="nav-item">
                                            <Link className='nav-link' to='/register'>Register</Link>
                                        </li>
                                        <li className="nav-item">
                                            <Link className='nav-link' to='/login'>Login</Link>
                                        </li>
                                    </ul>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Navbar

这是Navbar.css

.logo {
    width: 10%;
    display: inline-block;
}
.logo img {
    width: 100%;
}

.space {
    display: inline-block !important;
}

Answer 1

如果您可以向我们提供摘要或其他内容，那会更好您可以使用任何浏览器的开发人员工具找出导致空白的原因它可能是一个边距或填充，只需打开它并指向您的元素以找出答案，然后可以通过对该元素应用margin:0或padding:0来解决问题希望我能帮上忙！