css: 解决inline-block缝隙
2021-02-05 13:14
标签：换行 ons pre bsp 连接 html注释 导致 换行符 span html: css: 虽然四个块状子元素排在了一行，但是子元素之间却留有空隙！ 空隙产生原因：HTML中的换行符、空格符、制表符等空白符，字体大小不为0的情况下，空白符占据一定宽度，使用inline-block会产生元素间的空隙。 解决方法 ： css: 解决inline-block缝隙 标签：换行 ons pre bsp 连接 html注释 导致 换行符 span 原文地址：https://www.cnblogs.com/Nyan-Workflow-FC/p/13126635.htmldiv class="consult-tab">
a href="">咨询a>
a href="">企业咨询a>
a href="">咨询a>
a href="">咨询a>
a href="">咨询a>
div>.consult-tab {
position: relative;
font-size: 0;
margin-top: 20px;
border-bottom: 2px solid #1da838;
}
.consult-tab a {
display: inline-block;
font-size: 14px;
border: 1px solid #1da838;
border-right: 0;
border-bottom: 0;
}
1. 父元素的font-size设置为0，子元素的font-size设置为实际大小；
2. 子元素设置浮动；
3. 把所有的子元素写在一行；
4. 有时候子元素内容较长，所有子元素写在一行导致代码的可读性很差，这时候采用下面的写法（用HTML注释符把子元素连接起来）