CSS-inline-block 间隙
间隙产生的原因是`inline-block`对外是`inline`,对内是`block`。`inline`会将连续的空白符解析为一个空格(如:下面示例的两个`li`之间的后面的换行空格)。取消间隙的方法如下:
```html
Document
ul:last-child{
font-size: 0px;
}
li{
border: 1px solid #999;
padding: 2px;
min-width: 16px;
display: inline-block;
font-size: 14px;
line-height: 16px;
text-align: center;
}
有间隙
- 首页
- 上一页
- 1
- 2
- 3
- 下一页
- 尾页
无间隙:删除空格
- 首页
- 上一页
- 1
- 2
- 3
- 下一页
- 尾页
无间隙:父元素font-size: 0px;
- 首页
- 上一页
- 1
- 2
- 3
- 下一页
- 尾页
```
CSS-inline-block 间隙的更多相关文章
- CSS 概念 Block Inline Containing block
Block 元素 包括 "block-level box," "block container box," and "block box" ...
- DIV CSS display(block,inline,none)的属性教程
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- css display block 和 inline
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- css(二) block,inline和inline-block概念和区别
转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-leve ...
- css - inline\inline-block\block
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML/CSS:block,inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- CSS中block,inline和block-inline的区别(转载)
http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level e ...
- CSS 去掉inline-block间隙的几种方法
最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙.这些间隙会导致一些布局上的问题,需要把间隙去掉.对于inlin ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
随机推荐
- workflow-core 简介
最近想做一个OA相关的网站开发,一直都听说有workflow的东西,之前也断断续续学习过 Workflow Foundation 4.0,还是没有搞明白到底能够用它做什么 但还是觉得workflow在 ...
- Vue-实现简单拖拽(自定义属性)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- nodejs基础-HTTP
案例通过nodejs编写http服务程序 步骤:1,加载http模块2.创建http服务3.为http服务对象添加request事件处理程序4·开启http服务监听,准备接收客户端请求注意:1,浏览器 ...
- JavaScript.convertArray
function convertArray(nodeList){ var arr = [] if(Array.prototype.slice){ arr = [].sl ...
- 探究activity-android学习第三天
转载来源:https://www.jianshu.com/p/f8c68b3c2847?utm_campaign=maleskine&utm_content=note&utm_medi ...
- dp(最长公共子序列)
A subsequence of a given sequence is the given sequence with some elements (possible none) left out. ...
- CSS动画划入划出酷炫
HTML插入 <!DOCTYPE html> <html class="no-js iarouse"> <head> <meta char ...
- Codeforces Round #529 (Div. 3) E. Almost Regular Bracket Sequence (思维)
Codeforces Round #529 (Div. 3) 题目传送门 题意: 给你由左右括号组成的字符串,问你有多少处括号翻转过来是合法的序列 思路: 这么考虑: 如果是左括号 1)整个序列左括号 ...
- JS中对象数据类型的基本结构和操作
Object类型 ECMAScript中的队形其实就是一组数据和功能的集合.对象可以通过执行new操作符后跟要创建的对象类型的名称来创建.而创建Object类型的示例并为其添加属性和(或)方法,就可以 ...
- 基于GPU的图像处理平台
基于GPU的图像处理平台 1. (309)英伟达推Jetson TX1 GPU模块力推人工智能 1.1 产品概述 Jetson TX1 GPU模块,主要针对近年来蓬勃发展的人工智能市场,包括无人机. ...