html行内块元素之间的缝隙
关于html行内块元素之间缝隙的那点儿事情
事情是这样子的，我起初打算验证使用transform属性的标签是否会影响其他的标签的布局，于是写了下面一段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum=1.0, minimum=1.0, scalable=0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
/* 转换显示模式设置宽高 */
display: inline-block;
width: 100px;
height: 100px;
}
.a {
transform: translateX(100px);
background-color: red;
}
.b {
background-color: blue;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
结果呢也还算能接受：
但是，我发现了另外一个问题：
这之间的缝隙是什么东东？琢磨了好久也不知道。希望读者中有知道的麻烦评论告诉我一下，谢谢啦。
html行内块元素之间的缝隙的更多相关文章
- 解决行内块元素（inline-block）之间的空格或空白问题
一.问题产生 由于html代码格式化后,标签会缩进或者换行.由于浏览器默认处理导致元素在页面显示中出现单个空格问题,尤其在行内或者行内块元素布局时影响比较明显 例如: 代码 页面显示 二.解决方案 这 ...
- 元素显示模式：块元素 & 行内元素 & 行内块元素
元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...
- css——行内元素和块级元素的具体区别与行内块元素
(学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...
- CSS 两个行内块元素，宽度相加刚好等于父盒子容器的元素，但第二个元素掉在第二行解决办法
我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang= ...
- CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例
vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...
- CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性
样式表书写位置 内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...
- __x__(17)0906第三天__块元素block_内联元素inline_行内块元素inline-block
1. 块元素block 独占一行的元素 一般使用块元素包含内联元素,用作页面布局 <a> 标签可以包含任何除了a标签以外的元素 <p> 标签不能包含块元素 h1... ...h ...
- html——行内元素、块元素、行内块元素
行内元素:span ,a, ,strong , em, del, ins.特点:在一行上显示:不能直接设置宽高:元素的宽和高就是内容撑开的宽高. 块元素:div,h1-h6,p,ul,li.特 ...
- HTML行内级元素之间的空格问题
HTML行内级元素之间的空格问题 1.为什么元素之间会产生空格? 在编写行内级元素(包括inline-block元素)的代码之间如果有空格(换行),在浏览器上就会显示元素之间有空格. 示例代码如下: ...
随机推荐
- 2019 7 8 HL 模拟赛
今天 很不爽 昨天晚上没有睡好觉 大约2点才睡着吧 反正翻来覆去睡不着 不知道为什么可能可行流 或者可行费用流并没有深刻理解 .我不会写 让我心情非常的焦躁. 大凶 顺理成章的被3位强者吊着锤(妈呀我 ...
- Python编程基础（一）编程语言是什么？编译型语言和解释型语言的区别|Python是什么？
编程语言是什么? 其实,程序指的就是一系列指令,用来告诉计算机做什么,而编写程序的关键在于,我们需要用计算机可以理解的语言来提供这些指令. 虽然借助 Siri(Apple).Google Now(An ...
- MR程序的几种提交运行模式
本地模式运行 1-在windows的eclipse里面直接运行main方法 将会将job提交给本地执行器localjobrunner 输入输出数据可以放在本地路径下 输入输出数据放在HDFS中:(hd ...
- 畅购商城(二)：分布式文件系统FastDFS
好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star,更多文章请前往:目录导航 畅购商城(一):环境搭建 畅购商 ...
- react引入相同组件时互不影响
具体代码可以查看我的代码仓库 https://gitee.com/haomYGH/Web20/tree/master/010-React/014-redux-immutable 页面展示 要处理的问题 ...
- day11.函数的全局变量和局部变量
一.定义 """ 局部变量 : 在函数内部定义的变量(局部命名空间) 全局变量 : 在函数外部定义的或者使用global在函数内部定义(全局命名空间) 作用域: 作用的范 ...
- 00-基础SQL-SELECT语句
DML(数据操作语言,增删查改)DDL(数据定义语言,比如创建.修改或删除数据库对象)DCL(数据控制语言,控制数据库的访问) desc 表名:显示表结构:dual : 伪表 对于日期型数据,做 * ...
- /usr/bin/docker-current: Error response from daemon: driver failed programming external connectivity on endpoint naughty_wozniak (444e26e0a2a3adb1ff88177ead86099ad64c0406afcec179ce7cfeef8ffa2d5c): (i
/usr/bin/docker-current: Error response from daemon: driver failed programming external connectivity ...
- JavaScript异步编程——Async/Await vs Promise
兼容性 提醒一下各位,Node 现在从版本 7.6 开始就支持 async/await 了.而就在前几天,Node 8已经正式发布了,你可以放心地使用它. 如果你还没有试过它,这里有一堆带有示例的理由 ...
- linux下的node版本管理利器：nvm
nvm是一款node版本管理工具,简单来说,如果你想在一个环境下安装多个node版本,并向自由地切换相关版本,那你就需要使用nvm进行版本管理,有点类似pyenv,也是一款python版本管理工具. ...