display:inline-block元素之间空隙的产生原因和解决办法
在CSS布局中,如果我们想要将一些元素在同一行显示,其中的一种方法就是把要同行显示的元素设置display属性为inline-block。但是你会发现这些同行显示的inline-block元素之间会出现一定的空隙。
效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
} .box1,.box2 {
width: 200px;
height: 200px;
border: 1px solid;
display: inline-block;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
原因:
元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,空白会被浏览器忽略),HTML代码中的回车换行被转成一个空白符,在字体不为0的情况下,空白符占据一定宽度,所以inline-block的元素之间就出现了空隙。
解决办法:
一、删除元素之间的空白符
缺点:代码可读性差
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
} .box1,.box2 {
width: 200px;
height: 200px;
border: 1px solid;
display: inline-block;
}
</style>
</head>
<body>
<div class="box1">box1</div><div class="box2">box2</div>
</body>
</html>
二、在父元素中设置font-size: 0,在子元素上重新设置正确的font-size
缺点:inline-block的元素必须设定字体大小,不然行内元素中的字体不会显示,且增加了代码量
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
font-size: 0;
} .box1,.box2 {
width: 200px;
height: 200px;
border: 1px solid;
display: inline-block;
font-size: 16px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
三、为inline-block元素添加样式float:left
缺点:直接浮动就可以让一些元素在同一行显示,inline-block再浮动显得多此一举
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
} .box1,.box2 {
width: 200px;
height: 200px;
border: 1px solid;
display: inline-block;
float: left;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
最后来张解决问题的效果图:
display:inline-block元素之间空隙的产生原因和解决办法的更多相关文章
- 行内块inline-block元素之间出现空白间隙原因及解决办法
首先,来看下具体的问题,下面是用inline-block布局实现的两边固定宽度,中间自适应的html代码: 1 2 3 4 5 6 7 8 9 <section class="layo ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 当li设置为line-block时,元素之间出现间隙的原因和解决方法
原因 因为浏览器默认把inline元素之间的空白符(Tab.空格.换行)渲染成一个空格.而如下述代码,两个li元素之间的换行符被渲染成一个空格,则元素之间产生了间隙. 用Chrome浏览器将场景模拟出 ...
- Python3 Selenium定位不到元素常见原因及解决办法
Python3 Selenium定位不到元素常见原因及解决办法 一.问题描述 在做web应用的自动化测试时,定位元素是必不可少的,这个过程经常会碰到定位不到元素的情况: 报错信息: no such e ...
- ios下元素溢出设置 overflow:auto; 不能滑动解决办法
ios下元素溢出设置 overflow:auto; 不能滑动解决办法: overflow:auto; overflow-y:scroll; -webkit-overflow-scrolling:tou ...
- 去除行内(inline/inline-block)元素之间的间距
先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- 使用display inline-block 布局时,出现的间距问题的解决办法和相关说明
在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行.而内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 使用 display inline-b ...
- 子元素的margin-top影响父元素原因和解决办法
这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...
随机推荐
- Intelij IDEA创建SpringBoot项目 - 配置文件的解释
springboot介绍 官网:spring.io Spring Boot is designed to get you up and running as quickly as possible, ...
- 20191031-2 Beta阶段贡献分配规则
此次作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/9910 贡献分分配规则: 组内一共五名同学,贡献分共计50分. 1.每人 ...
- 【Spark机器学习速成宝典】基础篇01Windows下spark开发环境搭建+sbt+idea(Scala版)
注意: spark用2.1.1 scala用2.11.11 材料准备 spark安装包 JDK 8 IDEA开发工具 scala 2.11.8 (注:spark2.1.0环境于scala2.11环境开 ...
- js 函数定义的方式
js 函数定义的方式 一.总结 一句话总结: 最常见就下面三种 最常见:function func1([参数]){/*函数体*/} 将匿名函数赋值给变量:var func2=function([参数] ...
- BytesWritable 长度问题(多出空格)
在使用 BytesWritable 进行小文件合并时,发现长度与原类容不一致,会多出一些空格 测试代码 @Test public void test() { String str = "aa ...
- leetcode-easy-others-118 Pascal's Triangle
mycode 16.47% class Solution(object): def generate(self, numRows): """ :type numRow ...
- Use an Excel RTD Server with DCOM
费好大劲找到的文章,留存. Use an Excel RTD Server with DCOM 如何使用DCOM的Excel RTD服务器 Microsoft Office Excel 2007,Mi ...
- Navicat1_介绍
https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&shareId=400000000398 ...
- emqtt 系统主题
$SYS-系统主题 EMQ 消息服务器周期性发布自身运行状态.MQTT 协议统计.客户端上下线状态到 $SYS/ 开头系统主题. $SYS 主题路径以 “$SYS/brokers/{node}/” 开 ...
- MYSQL5.7二进制包的安装
mysql5.7 二进制包安装1. 下载包 wget http://mirrors.sohu.com/mysql/MySQL-5.7/mysql-5.7.12-linux-glibc2.5-x86_6 ...