可以使用以下方法去除 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 元素间的间距。