百度换肤实例中li内外边距问题

最新推荐文章于 2024-09-09 22:16:15 发布

A &......

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量177

点赞数

分类专栏：浮动文章标签： html css

本文链接：https://blog.csdn.net/m0_47531829/article/details/116081577

版权

浮动专栏收录该内容

2 篇文章 0 订阅

订阅专栏

博客探讨了在CSS布局中，使用display属性将li元素转换为行内块元素时遇到的默认外边距问题。作者发现即使设置了内外边距为0，li元素仍存在间距，导致整体长度超过父元素ul，使得最后一个li元素换行。然而，当使用浮动属性时，这个问题不再出现。文章提醒开发者在处理类似布局时考虑使用浮动来避免默认边距问题。

摘要由CSDN通过智能技术生成

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
            margin: 0;
            padding: 0
        }
        
        body {
            background: url(images/1.jpg) no-repeat center top;
        }
        
        .baidu {
            overflow: hidden;
            width: 408px;
            margin: 100px auto;
            background-color: #fff;
            padding-top: 3px;
        }
        
        .baidu li {
            display: inline-block;
            margin: 0 1px;
        }
        
        .baidu li img {
            width: 100px;
        }
    </style>

</head>

<body>
    <ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
</body>

</html>

在这里插入图片描述
因为利用display属性转换的行内块元素，所以产生了一个默认的外边距，想着给li中添加内外边距为0就可以解决问题了，但是加了之后，他还是仍然存在。导致我设置4个li最终的长度大于了ul的长度，最后一个li挤下来了。但是把diaplay属性，改成浮动，就没有产生默认的内外边距的问题了。恩，以后li要多想想浮动啊。
在这里插入图片描述