【小知识点】去除inline-block元素间间距的办法
之前一直用float浮动方法布局，因为display:inline-block有间隙，现在找到办法了。在父元素上面加font-sise:0，就可以了。
效果如图：
代码如下：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
ul{
box-sizing: border-box;
list-style: none;
margin: 0;
padding: 0;
font-size: 0;
}
li {
display: inline-block;
width: 25%;
text-align: center;
box-sizing: border-box;
border: 1px solid;
}
img{
width: 100px;
height: 100px;
}
p{
font-size: 20px;
}
</style>
</head> <body>
<ul>
<li>
<img src="../img/angle.png" />
<p>天使在唱歌</p>
</li>
<li>
<img src="../img/angle.png" />
<p>天使在唱歌</p>
</li>
<li>
<img src="../img/angle.png" />
<p>天使在唱歌</p>
</li>
<li>
<img src="../img/angle.png" />
<p>天使在唱歌</p>
</li>
</ul>
</body> </html>
【小知识点】去除inline-block元素间间距的办法的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 去除inline-block元素间间距的N种方法
这篇文章发布于 2012年04月24日,星期二,22:38,归类于 css相关. 阅读 147771 次, 今日 52 次 by zhangxinxu from http://www.zhangxin ...
- [转]去除inline-block元素间间距的N种方法
来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子 ...
- 去除inline-block元素间间距的N种方法<转>
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...
- 去除inline-block元素间间距的N种方法(转)
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...
- 去除inline-block元素间间距的N种方法-zhangxinxu
张鑫旭原文:点这里进入原文 另外附上大漠老师的如何解决inline-block元素的空白间距地址!!! 去除inline-block元素间间距的N种方法: 一.现象描述 真正意义上的inline-bl ...
- 转载>>去除inline-block元素间间距的N种方法《重》
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...
- 如何消除inline-block元素间间距问题（转）
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type=" ...
- css 小知识点：inline/inline-block/line-height
inline: 此元素会被显示为内联元素,元素前后没有换行符.因此:无法设置宽度和高度- inline-block: 行内块元素.元素前后没有换行符(CSS2.1 新增的值) 用通俗的话讲,就是不独占 ...
随机推荐
- Rect和RectF函数
1.是否包含点,矩形 判断是否包含某个点 boolean contains(int x,int y) 函数用于判断某个点是否在当前矩形中,如果在,则返回true ,不在则false 2.判断是否包含 ...
- php中如何传递Session ID
一般通过在各个页面之间传递的唯一的 Session ID,并通过 Session ID 提取这个用户在服务器中保存的 Session 变量,来跟踪一个用户.常见的 Session ID 传送方法主要有 ...
- PLSQL Developer配置OCI连接远程数据库
转: PLSQL Developer配置OCI连接远程数据库 当前环境: 本机系统:Win7 32位 PLSQL版本:9.06 数据库版本:10.2 32位 下面开始具体操作. 1.在Oracle官网 ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_18-CMS前端页面查询开发-页面原型-创建页面和定义路由
module下创建cms目录,里面存cms模块相关的页面 在cms下创建api和components目录,components下放的就是组件. 这个组件刚才介绍的base的下的组件不一样.base下的 ...
- JAXB序列化对象与反序列化XML
1.什么是JAXB JAXB(Java Architecture for XML Binding) 是一个业界的标准,是一项可以根据XML Schema产生Java类的技术. 该过程中,JAXB也提供 ...
- PAT 甲级 1026 Table Tennis (30 分)（坑点很多，逻辑较复杂，做了1天）
1026 Table Tennis (30 分) A table tennis club has N tables available to the public. The tables are ...
- c盘瘦身、windows解除上网限速、贴膜注意事项
1.c盘瘦身 1.1.https://zhidao.baidu.com/question/2057622451987202467.html 1.2.把C盘的swap空间换到D盘 2.windows解除 ...
- 实现两个DataTable的联合查询
如方法一描述:将子表的数组追加到主表数组的下面.从而实现类似于视图(单表)的效果. 那么Left Join(Inner Join)和Right Join(Outer Join) 将如何实现呢? 明天仔 ...
- 使用STM32F103ZET霸道主板实现SD卡的读写（非文件系统）
了解STM32F103ZET是高容量多管脚的芯片 了解SD读写线路图 了解SD的基地址 阅读STM32F10xx英文参考 SDIO那章,我们编写代码边看文档解析 建工程,打开包含所有包括外设库函数的样 ...
- HelloCube：ForEach
此示例演示了一个简单的ECS系统,它可以旋转一对立方体. 它显示了什么? 此示例演示了ECS中数据和功能的分离.数据存储在组件中,如下RadiansPerSecond属性存储在RotationSpee ...