去除 inline-block 元素间间距的方法

简介: 去除 inline-block 元素间间距的方法

可以使用以下方法去除 inline-block 元素间的间距:

方法一:设置父元素的 font-size 为 0,然后再在需要保留间距的子元素上重新设置 font-size。

HTML 代码示例:

<div class="parent">
  <div class="child">Element 1</div>
  <div class="child">Element 2</div>
  <div class="child">Element 3</div>
</div>

CSS 代码示例:

.parent {
  font-size: 0;
}
.child {
  display: inline-block;
  font-size: 16px; /* 设置需要保留间距的子元素的 font-size */
}

方法二:将每个 inline-block 元素的结束标签和下一个 inline-block 元素的开始标签写在同一行。

HTML 代码示例:

<div class="parent">
  <div class="child">Element 1</div><div class="child">Element 2</div><div class="child">Element 3</div>
</div>

CSS 代码示例:

.child {
  display: inline-block;
}

这样做可以避免在 HTML 代码中留下空格和换行符,从而去除 inline-block 元素间的间距。

相关文章
overflow的所有值,overlay不占位
overflow的所有值,overlay不占位
|
11天前
|
开发者
解决 display: inline-block 产生的空白间隙问题
【10月更文挑战第27天】在实际应用中,可以根据具体的布局需求、代码结构和兼容性要求等因素,选择合适的方法来消除空白间隙,以实现更精确、更美观的页面布局效果。
|
5月前
|
Web App开发 前端开发 JavaScript
如何去掉溢出内容的overflow属性滚动条
如何去掉溢出内容的overflow属性滚动条
274 1
|
6月前
|
前端开发 容器
CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
该文本是关于CSS样式技巧的摘要:包括单行和多行文本超出时的省略显示方法,以及Flex布局的两端对齐和一行超出后多行居中的示例代码。
|
6月前
行内元素有哪些?块级元素有哪些?空(void)元素有哪些?inline与inline-block的区别
行内元素有哪些?块级元素有哪些?空(void)元素有哪些?inline与inline-block的区别
55 0
消除两个inline-block元素之间的间隔
消除两个inline-block元素之间的间隔
47 0
font-size: 0消除空白字符导致的行内元素额外间距
`font-size: 0` 设置字体大小为0,但是它要实现的效果却不是字体为0看不见,而是消除子行内元素间额外多余的空白。最推荐的方式是,去掉标签之间的空格、换行等空白字符,这也是压缩...
553 0
font-size: 0消除空白字符导致的行内元素额外间距
|
前端开发 JavaScript
style样式优先级问题【display:block依旧无法显示DOM元素】
style样式优先级问题【display:block依旧无法显示DOM元素】
style样式优先级问题【display:block依旧无法显示DOM元素】
span标签溢出元素设置省略号
span标签溢出元素设置省略号
185 0