日常练习问题（一）_display:table;word-spacing:-1em;-CSDN博客

本文探讨了多种CSS布局中遇到的问题及解决方案，包括display:inline-block元素间隙、img图片底部间隙以及文本内容超出部分显示省略号的方法。通过具体实例，提供了解决这些问题的有效策略。

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

1. display:inline-block间隙的解决方案

方案一：将display:inline-block 的元素写在一行。

缺点：代码可读性差。

方案二：给父元素设置font-size:0，在子元素上重置正确的font-size。

缺点：inline-block元素必须设定字体，不然行内元素中的字体不会显示。增加了代码量。

方案三：给元素设置float:left。

缺点：float布局会有高度塌陷问题。

方案四：设置子元素的margin为负值，

缺点：元素之间间距的大小与上下文字体大小相关；并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以不同浏览器下 margin-right的负值是不一样的，因此这个方法不通用。

方案五：设置父元素 display:table;word-spacing:-1em;目前这个方法可以完美解决，且兼容其他浏览器。

2. img图片下面有间隙的解决方案

方案一：将图片转换为块级对象

img {display:block;}

方案二：设置图片的垂直对齐方式

即设置图片的vertical-align属性为「top，text-top，bottom，text-bottom」

img {vertical-align:top;}

方案三：设置父对象的文字大小为0

即font-size:0;

但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS校验的时候会提示文字过小的错误。（不建议使用）

方案四：改变父对象的属性

如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置： overflow:hidden;

width:1000px;height:600px;overflow:hidden;

方案五：设置图片的浮动属性或定位属性

img {float:left;}

img {position:absolute;}

方案六：取消图片标签和其父对象的最后一个结束标签之间的空格

由于浏览器会解析空格，故可以通过消除空格来解决问题，但是这个方法我们一般推荐，因为这样会使页面代码更加混乱，排版不清晰

3. 文本内容超出部分显示省略号

第一种：单行超出隐藏

// 单行显示省略号
p {
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

第二种：多行超出隐藏

// 多行显示省略号，数字5为超出5行显示
p{
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:5;
    text-overflow:ellipsis;
}

但是你会发现有的浏览器设置上-webkit-box-orient: vertical; 不起作用

解决方式如下：

/* autoprefixer: off */
 /* -webkit-box-orient: vertical; */
  /* autoprefixer: on */