javascript - 为什么 anchor 标记占用额外的空白空间？

Question

我正在做 React 元素，因为我有一个 anchor 标记，然后我有一个导航栏。 问题是 anchor 标记将导航栏推到右侧。因为 anchor 标签占用了额外的空白。 我什至尝试过使用 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 来解决问题那个元素 希望我能帮上忙!