a标签里嵌套有div,给a标签加border后为什么a标签的高度会跟父元素一样?

新手上路,请多包涵

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
        *{
            margin: 0;
        }
        .a{
            height: 50px;
        }
        .b{
            border: 1px solid green;
            display: flex;
            justify-content: space-around;
            list-style: none;
        }
        .b li{
            flex: 1;
            border: 1px solid red;
        }
        .b li a{
             border: 1px solid ;
            text-align: center
        }
    </style>
</head>
<body>
    <div class='a'>
        <ul class='b'>
            <li>
                <a href='#'>
                    <div>你好</div>
                </a>    
            <li>
            <li>
                <a href='#'>
                    <div>人间城</div>
                </a>    
            <li>
            <li>
                <a href='#'>
                    <div>生活</div>
                </a>    
            <li>
        </ul>
    </div>
</body>

</html>

发现一个小问题不太理解,就是给a标签加上border之后,其高度就填满了容器?而父元素的高度还超过了最外层的div???这是怎么一回事呢?

阅读 1.6k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题