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

Question

我正在研究反应项目，因为我有一个锚标签，然后我有一个导航栏。问题是锚标签将导航栏推到右侧。因为锚标签占用了额外的空白。我什至尝试过使用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>

                                    </ul>

                                </div>

                            </nav>

                        </div>

                    </div>

                </div>

            </div>

        )

    }

}

Answer 1

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

Answer 2

不要在锚标签内使用 div 。只需将徽标包装在锚标签中，并为该 img 标签指定任何宽度。像这样：<a className="navbar-brand space"&nbsp; href="www.facebook.com">&nbsp; &nbsp; <img src='assets/images/kaboom.png' width="150" alt='logo'></img></a>