css padding操作对于高度为0的标签不起作用

最新推荐文章于 2024-09-25 10:17:48 发布

桃子酱momo

最新推荐文章于 2024-09-25 10:17:48 发布

阅读量466

点赞数 6

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_42146720/article/details/135233264

版权

这是偶然发现的一次css padding 失效情况

期待效果：ul中的第二个li 向左padding 200px；
结果出现问题：当第二个li中没有内容时，padding失效。
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            background-color: #ccc;
            list-style: none;
            float: left;
        }

        li:nth-child(2) {
            padding-left: 200px;
        }

        li:nth-child(even) {
            color: red;
        }

        li:nth-child(odd) {
            color: blue;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>1</li>
            <li></li>  //第二个li标签内为空
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>

</html>

测试结果（为了更直观，给每一个li加了字体颜色和背景颜色）：
在这里插入图片描述
可见第二个li的padding值没有按代码中的正确显示。
原因：第二个li内容为空，此时第二个li的height为0，导致了padding失效。

解决办法：手动为空的标签添加高度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            background-color: #ccc;
            list-style: none;
            float: left;
        }

        li:nth-child(2) {
            height: 20px; //添加高度
            padding-left: 200px;
        }

        li:nth-child(even) {
            color: red;
        }

        li:nth-child(odd) {
            color: blue;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>1</li>
            <li></li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>

</html>