html清除盒子间距,inline-block元素默认间距清除

这次给大家带来inline-block元素默认间距清除，inline-block元素默认间距清除的注意事项有哪些，下面就是实战案例，一起来看一下。

话不多说，直接来看示例代码

.content{

letter-spacing: -0.5em;

}

.content .box{

letter-spacing: normal;

}

.content2{

font-size: 0;

}

.content2 .box{

font-size: initial;

}

.box{

width: 200px;

height: 100px;

background-color: #EEEEEE;

display: inline-block;

vertical-align: top;

}

默认状态

盒子1

盒子2

盒子3

盒子4

盒子5

方法一 letter-spacing: -0.5em

盒子1

盒子2

盒子3

盒子4

盒子5

方法二 font-size: 0

盒子1

盒子2

盒子3

盒子4

盒子5

实现的效果图如下

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

html清除盒子间距,inline-block元素默认间距清除相关推荐

inline元素的间距问题
我们经常遇见图片之间出现间距的问题,从这个问题入手,总结下原理. 任何不是块级元素的可见元素都是内联元素,其表现的特性是"行布局"形式.----<CSS权威指南> 图片 ...
css a 标签上下间距_CSS实用技能：去除inline-block元素间间距的7种方法
现象描述真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: 两个相邻的radio之间总是多那么一点点的间距,不是margin也不是paddin ...
html盒子模型图片居中,html学习笔记（img+body+盒子模型+块级元素居中+margi塌陷+float+文字围绕、打点）...
1.使用img产生间隔问题 img属于行级块级元素(标签)其属性display的值为inline-block,因有inline元素,故有文字属性,如果换行使用多个img标签来显示图片的时候,因换行带来 ...
【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
文章目录一.清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1.额外标签法和 overflow 样式法弊端 2.after 伪元素清除浮动简介 3.after 伪元素清除浮动核心代码 ...
inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
清除浮动-：after伪元素法（HTML、CSS）
清除浮动-:after伪元素法(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta ...
[CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
JS助记 ----- 盒子模型与获取元素样式
盒子模型简单介绍 content-box 默认的盒子模型,width 和 height 设置的是 content 的大小,有border和padding的情况下再额外增加盒子的宽高,整个盒子的可视区大 ...
使用flex 布局让子元素左右间距相等
使用flex 布局让子元素左右间距相等效果展示使子元素左右间距相等布局三种方法 1.justify-content: space-evenly; 2.justify-content: spac ...

html清除盒子间距,inline-block元素默认间距清除

默认状态

方法一 letter-spacing: -0.5em

方法二 font-size: 0

html清除盒子间距,inline-block元素默认间距清除相关推荐

最新文章

热门文章