关于css布局中,inline-block元素间隙的处理方法

关于inline-block元素间隙的处理

参考橱窗外的小孩,原文链接https://www.cnblogs.com/showcase/p/10469361.html

如下,两个inline-block之间,会产生默认的间隙。原因是因为元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化,当行内元素font-size:16px时,间距为8px。

<div>
        <input type="text" placeholder="请输入关键字 />
        <button></button>    
</div>

那么,如何能处理掉这些间隙呢?列举以下几个(但不限于)五个方法:

1,去除元素间的空白

 通过将上一个元素的闭合标签与下一个元素的开始标签写在同一行,可以去除元素间的空白,或者将两个inline-block元素间加上空白注释,或者不写元素的闭合标签等,例如这么写:

<ul>
    <li>one</li  
    ><li>two</li  
    ><li>three</li>
</ul>
<!-- or -->
<ul>
    <li>one</li><!--  
    --><li>two</li><!--  
    --><li>three</li>
</ul>

2,父元素设置font-size为0,子元素单独再设置字体大小

如下所示:

.layout.inline-block .left-center-right {
    font-size: 0;
}
.layout.inline-block .left-center-right>div {
    font-size: 16px;
}

3,设置margin-right为负值

用margin负值来抵掉元素间的空白,不过margin负值的大小与上下文的字体和文字大小相关,并且同一大小的字体,元素之间的间距在不同浏览器下是不一样的,如:font-size:16px时,Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以这个方法并不通用,也相对比较麻烦,因此不太推荐使用。

4,给inline-block元素加float或者flex

让行内块元素浮动起来,或者给父盒子加上display: flex; 都可以解决空白间隙的问题,不过这样处理的三栏式布局也就没必要用inline-block啦。

5,设置字符间距或者单词间距

这两个方法的原理有点像二所用的font-size,具体做法是给父元素一个letter-spacing或者word-spacing的负值,子元素再调整为0即可,具体使用字符间距还是单词间距其实大同小异。

/* letter-spacing */
.layout .left-center-right{
     letter-spacing: -0.5em;
}
.layout .left-center-right>div{
     letter-spacing: 0;
}
 
/* word-spacing */
 
.layout .left-center-right{
     word-spacing: -0.5em;
}
.layout .left-center-right>div{
     word-spacing: 0;
}

 

关于css布局中,inline-block元素间隙的处理方法

上一篇:httpClient4.5.12,集成Cookie


下一篇:shell脚本中执行mysql 语句,去除warning using a password on the command line interface can be insecure信息