1. inline 元素:

如果inline元素(span, strong, b, em, i等)代码换行,它们之间会产生我们不希望的间隔。通过设置margin:0或者padding:0 , 这个都间隔仍然存在,说明这个间隔并不是margin或者padding。

inline元素 1 inline元素 2 inline元素 3

是否为了不消除这个间隔,就必须把inline元素的html代码写在一行内呢?答案是否定的。 开发的时候,为了方便阅读和调试,我们习惯于把代码写成这样:

    <p>
        <span>inline元素 1</span>
        <span>inline元素 2</span>
        <span>inline元素 3</span>
        <span>inline元素 4</span>
        <span>inline元素 5</span>
    </p>

解决方法:设置父元素font-size:0,再给子元素单独设置font-size,修复bug。

inline元素 1 inline元素 2 inline元素 3

2. inline-block 元素:

要在一行展示多个并列的元素,除了通过设置浮动float:left;float:right,我们还可以通过设置display:inline-block 把 inline 元素或 block 元素,转换成一个可以设置高度和宽度的 inline-block 元素。

如果有5个inline-block元素,设置它们的宽度为20%。我们期望它们是在一行展示的。但是因为 html 代码换行产生了间距,导致无法在一行内显示。

inline-block元素 1 inline-block元素 2 inline-block元素 3 inline-block元素 4 inline-block元素 5

解决方法: 设置父元素font-size:0,再给子元素单独设置font-size

inline-block元素 1 inline-block元素 2 inline-block元素 3 inline-block元素 4 inline-block元素 5