如何去除掉inline-block元素之间的默认间距
前几天写一个页面
div{width:900px;}
div li{ display:inline-block; width:300px;}
<ul>
<li></li>
<li></li>
<li></li>
</ul>
发现宽度为900px的div居然放不下3个宽度为300px的内联元素li,只好改用了float:left来布局。后来上网一查,才知道inline-block是有默认间距的,默认间距为4px,并且inline也是有默认间距。现在就来盘点一些解决inline-block元素和inline元素之间间距的一些方法:
1、可以在html中直接把元素写在一行上或把闭合标签和第二个开始标签写在一行或两行间添加注释或直接去掉闭合标签但最后一个不能去掉。
2、设置margin-right为负值,但要考虑上下文的字体和文字大小。
3、先设定子元素字体,再设置父元素font-size:0px;////chrome中:-webkit-text-size-adjust:none;
4、设置父元素letter-spacing或word-spacing为负值,要考虑字体,子元素有文字也要注意设置letter-spacing或word-spacing的值。
5.float:left;
如何去除掉inline-block元素之间的默认间距的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 去除行内(inline/inline-block)元素之间的间距
先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...
- 在Chrome与火狐中,输入框input类型为number时,如何去除掉的自带的上下默认箭头
如何移除input='number'时浏览器自带的上下箭头: CSS样式: /* 去除input[type=number]浏览器默认的icon显示 */ input::-webkit-outer-sp ...
- 关于block元素和inline元素
呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...
- inline元素、block元素
inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...
- block元素和inline元素的特点
一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
- 当inline元素包裹block元素时会发生什么
经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...
- inline元素、block元素、inline-block元素
inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...
随机推荐
- TortoiseSVN中分支和合并实践
使用svn几年了,一直对分支和合并敬而远之,一来是因为分支的管理不该我操心,二来即使涉及到分支的管理,也不敢贸然使用合并功能,生怕合并出了问题对团队造成不良影响,最主要的原因是,自己对分支的目的和合并 ...
- We need the sql script to query the table Ditronics.Kiosk.Journal to find journal with mismatch denom information versus amount.
CREATE TABLE #MoneyTable ( Id , ) PRIMARY KEY , MoneyName ) , Cents INT ) INSERT INTO #MoneyTable ( ...
- 卸载sql server 2012
好不容易装上了sql server 2012数据库,可是却不能连接本地的数据库,后来发现缺少一些服务,于是决定重新安装,但是卸载却很麻烦,如果卸载不干净的话,重新安装会出问题,所以下面就总结一些方法: ...
- 点亮一个led
1:RS232电平:计算机串口 高电平为-12v,低电平为+12v,所以计算机与单片机进行通信的时候需要加电平转换芯片max232(高电平为-9到-12,低电平为+3到+12之间的. max232通常 ...
- Jquery UI的datepicker插件使用方法
原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插件可以独自分离出来使用,这是其他很多Jquery插件没有的 ...
- 如何使用Paste.Deploy
转自:http://bingotree.cn/?p=100 1.Paste Deploy的一个组件,但是并不依赖于Paste的其它组件.其可以看成是一个独立的包.其主要用于通过一个配置文件完成WSGI ...
- 恒天云技术分享系列4 – OpenStack网络攻击与防御
恒天云技术分享系列:http://www.hengtianyun.com/download-show-id-13.html 云主机的网络结构本质上和传统的网络结构一致,区别大概有两点. 1.软网络管理 ...
- BNUOJ-26586 Simon the Spider 最小生成树+枚举
题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=26586 题意:给一个图,每条边有一个权值.要你求选择一棵树,权值和为sum,然后在树上选择 ...
- ubuntu openstack spice
Openstack启用spice协议 #控制节点 #安装 ? 1 apt-get install nova-spiceproxy spice-html5 spice-vdagent #配置 nano ...
- ACCESS-delphi向中插入一条记录报错,但ACCESS不会
问题:在DELPHI中向ACCESS中插入一条记录时,提示“插入错误”,但是取出SQL直接放在ACCESS中插入成功?答:原因是插入语句中的字段名是DELPHI的内部标示符.