如何去除行内的间距

简介: 如何去除行内的间距

去除行内元素之间的间隙

当行内元素(此处主要是指inline-block)在一行显示时,存在默认的行间元素间隙,在布局时可能要去除

第一种方法: font-size(在子元素或者父元素上设置都可以,看需求)   //适用inline-block元素

<div class="parent" style="font-size: 0;">
        <input type="text"> 
        <input type="text"> 
</div>


第二种方法:letter-space(在父元素上设置)  //适用inline-block元素    //关于-5px,经测试,只有这个数值刚好重合,或许是个巧合,可自行测试

<div class="parent" style="letter-space:-5px;">
        <input type="text">
        <input type="text">
</div>

第三种方法:word-space(在父元素上设置)  //适用inline-block或者inline元素

<div class="parent" style="word-space:-5px;">
        <input type="text">
        <input type="text">
</div>

第四种方法:float(在子元素上设置)  //适用inline-block或者inline元素

<div class="parent">
        <input type="text"  style="float:left;">
        <input type="text"  style="float:left;">
</div>


相关文章
|
5月前
|
前端开发 开发者 容器
|
3月前
|
前端开发
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
66 2
|
3月前
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
56 0
|
5月前
|
前端开发
字符间距
字符间距。
41 1
|
11月前
行内块元素之间为什么会有间隙?怎么去除?
行内块元素之间为什么会有间隙?怎么去除?
109 0
效果:单行省略号,多行省略号
效果:单行省略号,多行省略号
52 0
|
前端开发 容器
font-size: 0消除空白字符导致的行内元素额外间距
`font-size: 0` 设置字体大小为0,但是它要实现的效果却不是字体为0看不见,而是消除子行内元素间额外多余的空白。最推荐的方式是,去掉标签之间的空格、换行等空白字符,这也是压缩...
529 0
font-size: 0消除空白字符导致的行内元素额外间距
文本单行省略号+多行出现省略号
文本单行省略号+多行出现省略号
|
前端开发
【CSS】设置文本样式,包括文本颜色、对齐、缩进、行高等
CSS如何设置文本样式?常见的文本样式有哪些?
280 0
【CSS】设置文本样式,包括文本颜色、对齐、缩进、行高等