如何去除inline-block的默认间距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>css inline-block间距怎么解决</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} li {
width: 100px;
height: 40px;
display: inline-block;
border: 1px solid red;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>XML</li>
<li>JSON</li>
</ul>
</body>
</html>
浏览器显示：
inline-block默认有间距
可以这样写：
<body>
<ul>
<li>
HTML</li><li>
CSS</li><li>
JavaScript</li><li>
JSON</li>
</ul>
</body>
浏览器显示:
元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。
如何去除inline-block的默认间距的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- inline-boock的默认间距
1 2 3 4 div{width:900px;} div li{ display:inline-block; width:300px;} <ul> <li></ ...
- 如何去除掉inline-block元素之间的默认间距
前几天写一个页面 div{width:900px;} div li{ display:inline-block; width:300px;} <ul> <li></li& ...
- css去除ios文本框默认圆角
css去除ios文本框默认圆角 input, textarea {-webkit-appearance: none;}
- inline-block默认间距
inline-block元素默认会有间距 解决方法之移除空格 元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了.考虑到代码可读性,显然连成一行的写法是不可 ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- 去掉inline-block元素默认间距的几种方法
方法1:使用负margin值一般是-3px,部分浏览器可能不同,不太推荐使用. 方法2:去掉多余空格将元素紧挨着写去掉多余空格,但降低了可读性. 方法3:使用font-size:0在外层父元素加上fo ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
随机推荐
- Task1.数据集探索
中文数据集THUCNews:https://pan.baidu.com/s/1hugrfRu 密码:qfud 参考:https://blog.csdn.net/SMith7412/article/de ...
- idea返回git上历史版本
1.首先找到之前想要返回得版本号 2.直接下载此版本号即可 在这里填入1步骤得版本号即可检出,其实这个检出利时版本和检出其他分支是同一个道理
- php strtotime,mktime,DateTime函数处理时间累加问题
时间戳(年月日时分秒) 使用strtotime函数,结合+1 month,-1 month,next month,last month的时候会出现一些问题. demo示例: //时间"20 ...
- VBox 启动虚拟机失败 - NtCreateFile(\Device\VBoxDrvStub)
在Vbox(5.0.8 版本)启动Ubuntu的虚拟机时,遇到错误信息: NtCreateFile(\Device\VBoxDrvStub) failed: 0xc000000034 STATUS_O ...
- 我的Podfile如下
# Uncomment this line to define a global platform for your projectuse_frameworks!(http://www.my516.c ...
- 初识HTTP状态码。
HTTP状态码被分成了五类.100-199 用于指定客户端应相应的某些动作.200-299 用于表示请求成功.300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息.400-49 ...
- virtualenv-windows下排坑
1. 安装 pip install virtualenv pip install virtualenvwrapper-win (win下一定要有这个 -win,不然后续 workon,mkvir ...
- (appium+python)UI自动化_02_appium启动手机app
前提:需先安装配置好appium+python自动化环境,已配置好环境的小伙伴可以参考以下步骤启动Android app,具体步骤如下: 一.USB连接手机 (1)手机USB连接电脑 (2)手机打开开 ...
- 【python】 判断纯ascii串
参考:http://stackoverflow.com/questions/3636928/test-if-a-python-string-is-printable print all(ord(c)& ...
- out.write()和out.print()区别，jsp注释区别
out.write()和out.print()结果一样,都是输出内容 前者输出html内容 后者输出变量 5 JSP注释 我们现在已经知道JSP是需要先编译成.java,再编译成.class的.其中& ...