padding内放置图片

最新推荐文章于 2023-04-02 17:21:09 发布

原创最新推荐文章于 2023-04-02 17:21:09 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#padding内含图

HTML 专栏收录该内容

2 篇文章

订阅专栏

这篇博客探讨了如何使用CSS将图标完美地放置在元素的padding区域内，不占用额外空间。通过示例代码展示了如何设置padding-left来实现标题新闻左侧图标与文字的无缝结合，同时在Chrome控制台中验证了效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  这里先给大家看一下效果图：

这里写图片描述
在这里我们可以清晰的看到标题新闻的padding-left：25px，完全放置了左边的图标，图标没有占据任何其他的空间，通过Chrome控制台可以清晰的发现，下面的“我是文字”，“我的购物车”也是这样的效果。
那么如何实现这种效果呢？
这里附上代码:
CSS代码：

    <style>
    *{
        margin: 0;
        padding: 0;
    }
    h3{
        padding-left: 25px;
        background: url(images/s.png) no-repeat left center;
        line-height: 30px;
    }
    ul{
        list-style:none;
    }
    ul li{
        background: url(images/s2.png) no-repeat left center;
        padding-left: 20px;
        line-height: 30px;
    }
    .gwc{
        display: block;
        width: 150px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border:1px solid #333;
        background: url(images/s3.png) no-repeat 4px 15px;

    }
    </style>

HTML代码

<body>
    <h3>新闻</h3>
    <h3>新闻</h3>
    <h3>新闻</h3>

    <ul>
        <li><a href="#">我是文字</a></li>
        <li><a href="#">我是文字</a></li>
        <li><a href="#">我是文字</a></li>
        <li><a href="#">我是文字</a></li>
    </ul>
    <a href="" class="gwc">我的购物车</a>
</body>

效果如图
这里写图片描述