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元素通 ...
随机推荐
- PHP 调试工具Xdebug安装配置
## PHP 调试工具Xdebug安装配置 一.Xdebug 介绍 Xdebug是一个开源的PHP程序调试工具,可以使用它来调试.跟踪及分析程序运行状态.当然,Xdebug需要结合PHP的编辑工具来打 ...
- MyBatis框架介绍及其实操
一.基本概念和介绍 数据持久化的概念 数据持久化是将内存中的数据模型转换为存储模型,以及将存储模型转换为内存中的数据模型的统称.例如,文件的存储.数据的读取等都是数据持久化操作.数据模型可以是任何数据 ...
- POJ 2487
#include<iostream> #include<stdio.h> using namespace std; int compare(void const * i,voi ...
- vue教程1-01 v-model 一般表单元素(input) 双向数据绑定
vue教程1-01 v-model 一般表单元素(input) 双向数据绑定el:'#box',//这里放的是选择器.不然会不生效 <!DOCTYPE html> <html l ...
- Windows 安装Rabbitmq
Rabbitmq是基于erlang开发的消息队列,客户端支持主流的开发语言(java.C#.Python等). 环境:windows server 2012(x64) 1.下载安装 http://ww ...
- 基于vue的web应用如何构建成手机端的原生安装包
话不多说,点击前往
- ERROR tool.ImportTool: Encountered IOException running import job: java.io.IOException: Hive exited with status 2
这是sqoop的 迁移数据到hive的报错 解决方案: 1,已经尝试不是 晚上大多数说的 libthrity的原因 2,查看自己的配置 sqoop-env.sh 如果配置的路径写的不对,对应的包 ...
- 深入聊聊Java多线程
一.背景 在没有学习Java多线程以前,总觉得多线程是个很神秘的东西,只有那些大神才能驾驭,新年假期没事就来学习和了解一下Java的多线程,本篇博客我们就来从头说一下多线程到底是怎么回事. 二.概述 ...
- 【教程向】——基于hexo+github搭建私人博客
前言 1.github pages服务生成的全是静态文件,访问速度快: 2.免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 3.可以随意绑定自己的域名,不仔细看的话根本看 ...
- Linux 数据重定向
名称 描述 代码 表示 stdin 标准输入 0 < 或 << stdout 标准输出 1 > 或 >> stderr 标准错误输出 2 2> 或 2> ...