两个行内元素在一起，会出现一定的间距，即使将border、padding、margin都设置为零也无济于事，那么怎么才能去除这些间距呢？
首先这里的div设置为了行内块元素，span本身为行内元素，并且设置了* {padding: 0; margin: 0;}，那怎么清除元素之间的空白缝隙呢？？
（1）给元素加浮动
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.parent {
width: 200px;
height: 100px;
margin-top:20px;
margin-left:20px;
border: 1px solid #000;
}
.parent div {
width: 50px;
height: 50px;
display: inline-block;
float:left;
}
.parent div:nth-child(1) {
background-color: pink;
} .parent div:nth-child(2) {
background-color: skyblue;
} .parent div:nth-child(3) {
background-color: yellow;
}
.span_parent {
border: 1px solid #000;
margin-left:20px;
width: 200px;
height: 100px;
margin-top:20px; }
.span_parent span {
float: left;
}
.span_parent span:nth-child(1) {
background-color: pink;
}
.span_parent span:nth-child(2) {
background-color: skyblue;
}
.span_parent span:nth-child(3) {
background-color: yellow;
}
</style>
</head> <body>
<!-- position:absolute或position:fixed -->
<div class="parent">
<div>div1</div>
<div>div2</div>
<div>div3</div>
</div> <div class="span_parent">
<span>span1</span>
<span>span2</span>
<span>span3</span>
</div> </body> </html>
（2）把所有的元素标签都写到一行上
<body>
<div class="parent">
<div>div1</div><div>div2</div><div>div3</div>
</div> <div class="span_parent">
<span>span1</span><span>span2</span><span>span3</span>
</div>
</body>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.parent {
width: 200px;
height: 100px;
margin-top:20px;
margin-left:20px;
border: 1px solid #000;
}
.parent div {
width: 50px;
height: 50px;
display: inline-block;
/* float:left; */
}
.parent div:nth-child(1) {
background-color: pink;
} .parent div:nth-child(2) {
background-color: skyblue;
} .parent div:nth-child(3) {
background-color: yellow;
}
.span_parent {
border: 1px solid #000;
margin-left:20px;
width: 200px;
height: 100px;
margin-top:20px; }
.span_parent span {
/* float: left; */
}
.span_parent span:nth-child(1) {
background-color: pink;
}
.span_parent span:nth-child(2) {
background-color: skyblue;
}
.span_parent span:nth-child(3) {
background-color: yellow;
}
</style>
</head> <body>
<!-- position:absolute或position:fixed -->
<div class="parent">
<div>div1</div><div>div2</div><div>div3</div>
</div> <div class="span_parent">
<span>span1</span><span>span2</span><span>span3</span>
</div> </body> </html>
（3）给其父元素加入“font-size:0px;”
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.parent {
width: 200px;
height: 100px;
margin-top:20px;
margin-left:20px;
border: 1px solid #000;
font-size:0px;
}
.parent div {
width: 50px;
height: 50px;
display: inline-block;
font-size:14px;
/* float:left; */
}
.parent div:nth-child(1) {
background-color: pink;
} .parent div:nth-child(2) {
background-color: skyblue;
} .parent div:nth-child(3) {
background-color: yellow;
}
.span_parent {
border: 1px solid #000;
margin-left:20px;
width: 200px;
height: 100px;
margin-top:20px;
font-size:0px; }
.span_parent span {
/* float: left; */
font-size:14px;
}
.span_parent span:nth-child(1) {
background-color: pink;
}
.span_parent span:nth-child(2) {
background-color: skyblue;
}
.span_parent span:nth-child(3) {
background-color: yellow;
}
</style>
</head> <body>
<div class="parent">
<div>div1</div>
<div>div2</div>
<div>div3</div>
</div> <div class="span_parent">
<span>span1</span>
<span>span2</span>
<span>span3</span>
</div>
</body> </html>
两个行内元素在一起，会出现一定的间距，即使将border、padding、margin都设置为零也无济于事，那么怎么才能去除这些间距呢？的更多相关文章
- 图片文字混排的垂直居中、inline-block块元素和行内元素混排的垂直居中问题
图片.文字混排: 不管图片和文字的前后位置,都要给 图片 设置 vertical-algin,而不是谁在前面给谁设置. 此方法兼容IE7+ 和其它主流浏览器.IE7-没有测. inline-block ...
- html书写行内元素时-tab和换行会在行内元素间引入间距
目录 html文本中的控制字符会被解析为文本节点 书写行内元素时,换行符LF与水平制表符HT会引入莫名的元素间间隔 其他控制字符是否会引入间距的验证 html文本中的控制字符会被解析为文本节点 举例: ...
- html 行内元素和块级元素
行内元素一般是内容的容器,而块级元素一般是其他容器的容器.一般情况下,行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行:而块级元素可以包含行内元素 ...
- img 默认是行内元素，它旁边的空格是会保留的
img 默认是行内元素,它旁边的空格是会保留的.因此图片宽度设置百分百后下面会有点找不出原因的间隙. 解决办法:img{display:block}
- HTML的块级元素和行内元素
行内元素一般是内容的容器,而块级元素一般是其他容器的容器.一般情况下,行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行:而块级元素可以包含行内元素 ...
- CSS 两个行内块元素，宽度相加刚好等于父盒子容器的元素，但第二个元素掉在第二行解决办法
我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang= ...
- html元素两种分类。替换元素和不可替换元素；块级元素和行内元素
根据元素本身特点来分类: 替换元素替换元素根据其标签和属性来决定元素的具体显示内容.有<img><input><textarea><select>< ...
- HTML 行内元素和块级元素的理解及其相互转换
块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格).. ...
- CSS学习笔记——盒模型，块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...
随机推荐
- .NET异步编程模式(一)
.NET 提供了三种异步编程模型 TAP - task-based asynchronous pattern APM - asynchronous programming model EAP - ev ...
- Redis 哨兵机制
概述 由一个或多个 Sentinel(哨兵)实例组成的 Sentinel 系统可以监视任意多个主服务器,以及这些主服务器属下的所有从服务器,并在被监视的主服务器进入下线状态时,自动将下线主服务器属下的 ...
- Docke 搭建 apache2 + php8 + MySQL8 环境
Docker 安装 执行 Docker 安装命令 curl -fsSL https://get.docker.com/ | sh 启动 Docker 服务 sudo service docker st ...
- C++11实现的数据库连接池
它什么是? 数据库连接池负责分配.管理和释放数据库连接,它允许应用程序重复使用一个现有的数据库连接,而不是再重新建立一个:类似的还有线程池. 为什么要用? 一个数据库连接对象均对应一个物理数据库连接, ...
- 【HTML】学习路径1-网页基本结构-标签基本语法
本系列将学习最基础的web前端知识: HTML---CSS---JavaScripts---jQuery 四大部分学习完以后再进入到JavaWeb的知识.(后端) 然后再学习SpringBoot技术. ...
- Dapr中国社区活动之 分布式运行时开发者日 （2022.09.03）
自2019年10月首次发布以来,Dapr(Distributed Application Runtime,分布式应用运行时)因其"更稳定"."更可靠".&quo ...
- Mysql_Order_By的坑
CREATE TABLE `tt_transfer_container_pick_config` ( `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT, ...
- 001从零开始入门Entity Framework Core——基础知识
Entity Framework (EF) Core 是轻量化.可扩展.开源和跨平台版的常用 Entity Framework 数据访问技术. 一.什么是 Entity Framework Core ...
- python 基于aiohttp的异步爬虫实战
钢铁知识库,一个学习python爬虫.数据分析的知识库.人生苦短,快用python. 之前我们使用requests库爬取某个站点的时候,每发出一个请求,程序必须等待网站返回响应才能接着运行,而在整个爬 ...
- 【前端】在浏览器控制台，直接发Ajax请求
我们在日常的开发的过程中,经常需要前端测试发送请求测试一些数据.但是由于一些session,cookie的存在,我们无法在postman上创建一些会话.那么这样,我们就可以在浏览器上直接发送Ajax请 ...