去除 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不占位
|
6月前
|
前端开发 JavaScript 容器
display有哪些值?说明他们的作用?
display有哪些值?说明他们的作用?
|
3月前
行内元素有哪些?块级元素有哪些?空(void)元素有哪些?inline与inline-block的区别
行内元素有哪些?块级元素有哪些?空(void)元素有哪些?inline与inline-block的区别
25 0
|
8月前
元素居中的几种方式
元素居中的几种方式
40 0
|
7月前
消除两个inline-block元素之间的间隔
消除两个inline-block元素之间的间隔
30 0
|
9月前
|
搜索推荐 前端开发 JavaScript
meta标签有哪些属性和属性值?li设为行内块时有间隙怎么办?call、apply和bind的作用和区别?
`meta`标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。`meta`标签位于文档的头部,不包含任何内容。`meta`标签的属性定义了与文档相关联的名称/值对。
span标签溢出元素设置省略号
span标签溢出元素设置省略号
125 0
font-size: 0消除空白字符导致的行内元素额外间距
`font-size: 0` 设置字体大小为0,但是它要实现的效果却不是字体为0看不见,而是消除子行内元素间额外多余的空白。最推荐的方式是,去掉标签之间的空格、换行等空白字符,这也是压缩...
407 0
font-size: 0消除空白字符导致的行内元素额外间距
|
前端开发 JavaScript
style样式优先级问题【display:block依旧无法显示DOM元素】
style样式优先级问题【display:block依旧无法显示DOM元素】
154 0
style样式优先级问题【display:block依旧无法显示DOM元素】
hover时行级元素变成了块级元素,导致位置错乱
hover时行级元素变成了块级元素,导致位置错乱