inline-block元素间隙处理
要使多个块级元素并行显示,可使用float或者inline-block进行处理
使用inline-block会出现元素之间的间隙
<div class="demo">
<p>我是一个span</p>
<p>我是一个span</p>
<p>我是一个span</p>
<p>我是一个span</p>
</div> .demo span{
background:#ddd;
display:inline-block;
}
如图:
*间隙是由换行或者回车导致的,所以将标签代码都写同一行即可解决。不过这个方法不靠谱,因为space是由换行或回车所产生空白符所致,所以在其父元素设置font-size:0,如元素内有文字标签需重写font-size。
.demo{
font-size:0;
}
.demo span{
background:#ddd;
display:inline-block;
font-size:14px;
}
如图:
注释:如需对低版本兼容还得进一步处理
inline-block元素间隙处理的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 多个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等,并且会换行.块级对象元素会单独占一行显示, ...
- block元素和inline元素的特点
一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...
- 关于block元素和inline元素
呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...
- inline元素、block元素
inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...
- CSS 去掉inline-block元素间隙的几种方法
最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙.这些间隙会导致一些布局上的问题,需要把间隙去掉.对于inlin ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
随机推荐
- 多个JDK下TOMCAT运行设置
当OS中含有多个JDK版本时,设置TOMCAT下JAVA环境变量信息的办法: 1.在setclasspath.bat或者setclasspath.sh下设置 set JAVA_HOME=d:\java ...
- VS2013 生成事件,删除不必要的DLL
解决方案中有一个 Project 是 Windows Service,用来从消息队列中取出事件,发送通知电邮: UI是一个MVC网站,两个Project都引用了同一个类库,这个类库引用了第三方的生成P ...
- 修改ssh远程默认端口
修改ssh远程默认端口 Linuxssh端口修改 1. 修改ssh配置文件 [root@distzabbix ~]# vim /etc/ssh/sshd_config 找到第17行附近#Port 22 ...
- MySQL 排名统计(常用功能函数)
select actor_id,@curr_cnt:=cnt as cnt , ,@rank) as rank, @prev_cnt:=@curr_cnt as dummy from( select ...
- flask开发的CMS管理系统
Dohoom 详细介绍 Dohoom 基于Python3 Flask +Mysql+ Redis开发的一个Web系统 可用于搭建(开发)个人网站, 企业官网.包含:相册模块,文章模块,小组模块,私信模 ...
- dubbo管控台安装
1. jdk安装 # cp installpkgs/jdk-7u67-linux-x64_tar_gz /usr/local # tar -zxf jdk-7u67-linux-x64_tar_g ...
- 3DMax——室内设计:墙体+吊顶
1.导入CAD平面图 2.将导入的平面图全部选中→颜色设置为其他颜色→设置为组(设置为组,是为了后期选材质方便) 3.选中图形,选择移动工具,输入坐标为0,右键选择冻结当前选择 4.右键“角度捕捉切换 ...
- VScode中支持Python虚拟环境
要在VScode中使用Python的virtualenv虚拟环境,首先在设置同添加虚拟环境所在目录和虚拟环境的识别规则: { ... "python.venvPath": &quo ...
- pcm原始数据绘制
最近帮别人做了个东西,这里分享一下pcm原始数据绘图的思路 1.pcm数据采样位数,根据采样位数选取适合自己绘图的采样点的数量 2.计算出最大最小的的采样点的值差 3.根据要显示pcm数据的控件宽高, ...
- js中编写velocity逻辑
<script type="text/javascript"> $(function(){ #foreach( $var in $entity.showConfigs ...