手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >inline-block元素默认间距的两种清除方法示例代码
inline-block元素默认间距的两种清除方法示例代码
摘要:话不多说,直接来看示例代码.content{letter-spacing:-0.5em;}.content.box{letter-spaci...

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .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; } </style> </head> <body> <h4>默认状态</h4> <div> <div class="box">盒子1</div> <div class="box">盒子2</div> <div class="box">盒子3</div> <div class="box">盒子4</div> <div class="box">盒子5</div> </div> <h4>方法一 letter-spacing: -0.5em</h4> <div class="content"> <div class="box">盒子1</div> <div class="box">盒子2</div> <div class="box">盒子3</div> <div class="box">盒子4</div> <div class="box">盒子5</div> </div> <h4>方法二 font-size: 0</h4> <div class="content2"> <div class="box">盒子1</div> <div class="box">盒子2</div> <div class="box">盒子3</div> <div class="box">盒子4</div> <div class="box">盒子5</div> </div> </body> </html>

实现的效果图如下

inline-block元素默认间距的两种清除方法示例代码1

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

【inline-block元素默认间距的两种清除方法示例代码】相关文章:

css清除浮动方法和代码

关于清除浮动塌陷的几种方法总结

IE6 innerHTML写入的iframe src不显示BUG的解决方法

CSS让段落开头自动空两格代码

CSS 制作的三级菜单特效代码

IE6下图片下方有空间距的多种解决方法

添加css样式的三种方法

CSS教程:闭合CSS浮动元素的几种方法

IE6定义1px左右高度的容器示例代码

用css实现十字的布局示例代码

精品推荐
分类导航