清除inline-block间隙的方法

最新推荐文章于 2024-05-05 07:41:03 发布

Mm_Dxx

最新推荐文章于 2024-05-05 07:41:03 发布

阅读量165

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/Mm_Dxx/article/details/104158691

版权

inline-block 即内联块,在CSS的元素分类中可以分成三种：行内元素或者内联元素、块级元素、以及内联块元素。

内联块元素具有了内联元素以及块级元素的特性：（1）元素之间可以水平排列（2）可以当做一个块级元素来设置各种的属性，例如：width、height、padding等。

当需要在”inline”元素上控制margin和padding时，inline-block属性值变得非常有用，有了它，你不在需要让这些元素去“block”和“float”。但有一个问题，当使用inline-block时，HTML元素之间的空白会显示在页面上。很讨厌。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul li {
            display: inline-block;
            background-color: #444;
            border-right: 1px #333 solid;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div>
                1
            </div>
        </li>
        <li>
            <div>
                2
            </div>
        </li>
        <li>
            <div>
                3
            </div>
        </li>
    </ul>
</body>
</html>

在这里插入图片描述

清除inline-block间隙的方法

方法一：各元素间不留任何空白

<ul>
    <li><div>1</div></li><li><div>2</div></li><li><div>3</div></li>
</ul>

方法二：HTML注释

<ul>
    <li><div>1</div></li><!--
    --><li><div>2</div></li><!--
    --><li><div>3</div></li>
</ul>

方法三：负边距

<ul>
    <li><div>1</div></li>
    <li style="margin-left: -5px;"><div>2</div></li>
    <li style="margin-left: -6px;"><div>3</div></li>
</ul>

方法四：首位接龙

<ul>
     <li><div>1</div></li
     ><li><div>2</div></li
     ><li><div>3</div></li>
</ul>

方法五：在父元素上设置font-size: 0

<ul style="font-size: 0;">
     <li>
         <div>
                1
         </div>
     </li>
     <li>
         <div>
                2
         </div>
     </li>
     <li>
         <div>
                3
         </div>
     </li>
</ul>

Mm_Dxx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除inline-block间隙的方法

inline-block 即内联块,在CSS的元素分类中可以分成三种：行内元素或者内联元素、块级元素、以及内联块元素。内联块元素具有了内联元素以及块级元素的特性：（1）元素之间可以水平排列（2）可以当做一个块级元素来设置各种的属性，例如：width、height、padding等。当需要在”inline”元素上控制margin和padding时，inline-block属性值变得非常有用，有...
复制链接

扫一扫